bootstrap的导航栏在页面刷新后显示选中

这个问题今天花了两个小时第一次解决一点也不难很简单要领就是要注意观察bootstrap的导航栏在点击时一级以及二级菜单栏标签class以及属性的变化再根据判断当前的url和哪个标签的url相等这个条件把相等的这个标签的属性以及class赋上观察到的值

部分导航栏代码如下:

               <ul class="nav metismenu" id="side-menu"><li><a href="#"><i class="glyphicon glyphicon-user"></i> <span class="nav-label">账户管理</span><span class="fa arrow"></span></a><ul class="nav nav-second-level collapse"><li><a href="/Acc/Detail">用户资料</a></li><li><a href="/Acc/Password">登录密码</a></li><li><a href="/Acc/Security">账户安全</a></li><li><a href="/Acc/log">用户日志</a></li></ul></li><li><a href="#"><i class="glyphicon glyphicon-list-alt"></i> <span class="nav-label">订单管理</span><span class="fa arrow"></span></a><ul class="nav nav-second-level collapse"><li><a href="/ord/query">订单查询</a></li><li><a href="/rec/Pay">充值</a></li><li><a href="/ord/bat">订单状态</a></li><li><a href="/Rec/Group">付款记录</a></li></ul></li><li><a href="#"><i class="glyphicon glyphicon-usd"></i> <span class="nav-label">资金管理</span><span class="fa arrow"></span></a><ul class="nav nav-second-level collapse"><li><a href="/Acc/Ench">申请提现</a></li><li><a href="/Acc/Earn">账户收支</a></li><li><a href="/Acc/Cash">提现记录</a></li><li><a href="/acc/disco">结算比例</a></li></ul></li></ul>

jQuery代码如下: if (url.indexOf("?") > 0 || url.indexOf("#") > 0)这个判断是去除点击分页的下标后面的?参数

aria-expanded属性和in这个class是观察到的属性变化如果有读者遇到相似的问题不要原封不动的copy

        $(function () {$("#side-menu a").each(function () {var url = String(window.location)if (url.indexOf("?") > 0 || url.indexOf("#") > 0) {var a = url.indexOf("?") > 0 ? url.indexOf("?") : url.indexOf("#");url = url.substring(0, a);}if ($(this)[0].href == url) {var $showLevalTwo = $(this).parent().parent();//2级菜单栏$showLevalTwo.parent().addClass('active');//1 leval maneu$showLevalTwo.attr('aria-expanded', true);$showLevalTwo.addClass('in');$showLevalTwo.siblings('aria-expanded', true);$(this).parent().addClass('active');}});

bootstrap的导航栏在页面刷新后显示选中相关推荐

Axure RP 如何实现导航栏切换页面——母版
网站的导航功能是一个网站的最基本也是最为重要的功能之一,当我们在做项目时,点击导航按钮实现跳转页面,并且每次点击跳转都会有交互,运用母版,可大量减少设计时间,实现跳转页面. 以知乎网站为例: 总结为两 ...
【vue】使用localStorage解决vuex在页面刷新后数据被清除的问题
[vue]使用localStorage解决vuex在页面刷新后数据被清除的问题参考文章: (1)[vue]使用localStorage解决vuex在页面刷新后数据被清除的问题 (2)https:// ...
微信小程序自定义底部导航栏遮挡页面内容（已解决）
今天也是努力写毕设的一天~ 这几天在实现旅行日记的笔记详情界面,先实现了自定义的底部导航栏,在这里我使用的是iView Weapp,具体的介绍我放在这里了~ 快速上手 iView Weapp 跟着里面 ...
bootstrap实现导航栏的响应式布局，当在小屏幕、手机屏幕浏览时自动折叠隐藏
<!DOCTYPE html> <html> <head> <title>bootstrap实现导航栏的响应式布局,当在小屏幕.手机屏幕浏览时自动折叠隐 ...
Android底部导航栏切换页面填坑
** Android底部导航栏切换页面填坑 ** 这个效果的实现关键点就是给选项赋予两种状态,focused和normal,在主程序中用监听判断是否被选中,就给被选中的选项设focused为true, ...
导航栏不变页面切换最简单的方法
导航栏不变页面切换最简单的方法不久前一个导航栏想的我焦头烂额,碰巧得到了一个项目才知道怎么写的,我这个方法呢就跟插入导入css,js样式差不多.请看下面的图片创建一个num.html,在里面把 ...
python selenium刷新页面_python selenium 解决页面刷新后元素找不到问题
1,问题: 当我们第一遍找元素是找到了,而你循环后页面已经新刷新,所以不能用第一遍找出的元素了即:页面刷新后元素的属性是没变,但是element却变了,所有之前定位的元素element都过期了 2, ...
08﹑导航子页面切换功能5_实现导航栏子页面切换
08﹑导航子页面切换功能5_实现导航栏子页面切换
ECharts 饼图切换数据源bug 开始没数据显示切换或刷新后显示
1.出现问题原因一个饼图,右上方两个按钮分别为今天和本月,分别调用不同接口控制,点击则调用不同接口同时饼图绑定数据源刷新:出现此问题原因点击今日按钮有一个饼图区域形没有数据不显示,对应数据值比例都没 ...

bootstrap的导航栏在页面刷新后显示选中

bootstrap的导航栏在页面刷新后显示选中相关推荐

最新文章

热门文章