基于Adminlte 使用Flask模板功能解决侧边栏（siderbar）不激活问题

Posted 2021-01-30 skadieye

使用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