基於Adminlte 使用Flask模板功能解決側邊欄(siderbar)不激活問題
阿新 • • 發佈:2018-12-26
如果 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)不激活問題