基于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

posted @ 2018-12-26 21:03  skadieye  阅读(1514)  评论(0编辑  收藏  举报