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