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