1. 程式人生 > >基於Adminlte 使用Flask模板功能解決側邊欄(siderbar)不激活問題

基於Adminlte 使用Flask模板功能解決側邊欄(siderbar)不激活問題

如果 ret 操作 ase active fun ask win 文件

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

基於Adminlte 使用Flask模板功能解決側邊欄(siderbar)不激活問題