zoukankan      html  css  js  c++  java
  • 基于Adminlte 使用Flask模板功能解决侧边栏(siderbar)不激活问题

    使用Flask 开发web页面,在使用Jinja2 模板放入到Adminlte 框架中时,为了避免重复需要建立一个base.html ,遇到侧边栏(Sidebar)不能自动激活问题, 如果侧边栏是

    如果有侧边栏选项A/B/C 如何确保在base.html 文件里做基础配置的时候,当A.html 页面打开时能使A 高亮(active),B.html页面打开是能使B高亮(active)呢, 查了Adminlte 和 Bootstrap的资料, 发现可以使用如下代码完成自动高亮, 而避免再A.html  页面 和 B.html 页面中手动配置 active属性,减少操作重复性

    <li>A</li>
    
    <li>B</li>
    
    <li>C</li>

    代码如下

        $(document).ready(function() {
            var url = window.location; 
            var element = $('ul.sidebar-menu a').filter(function() {
            return this.href == url || url.href.indexOf(this.href) == 0; }).parent().addClass('active');
            if (element.is('li')) { 
                 element.addClass('active').parent().parent('li').addClass('active')
             }
        });

    参考: https://forum.jquery.com/topic/change-active-class-when-link-is-selected-click-action

  • 相关阅读:
    jquery之实例应用
    jquery之文档操作
    jquery之css操作
    jquery属性的操作
    jquery筛选器
    jquery选择器之表单选择表单对象属性
    jquery选择器之属性选择器
    jquery选择器之子元素
    数位dp基础
    Leetcode 5195. 最长快乐字符串(贪心)
  • 原文地址:https://www.cnblogs.com/skadieye/p/10181791.html
Copyright © 2011-2022 走看看