Bootstrap导航菜单点击后无法自动添加active的处理

  Bootstrap提供了很丰富的前后端框架,为不精通CSS的程序猿们提供了很大的便利。前段时间在使用Bootstrap中的菜单控件时,其中的链接点击后,无法自动添加active类,即无法自动激活。需要适当做如下处理才OK。
  废话说了,直接上代码:

<ul class="tabbable faq-tabbable">
    <li class="active"><a href="@Url.Action("Index", "MyContract", new { area = "MyData" })">我的合同</a></li>
    <li><a href="@Url.Action("Index", "MyCashout", new { area = "MyData" })">我的请款</a></li>
    <li><a href="@Url.Action("Index", "MyReceive", new { area = "MyData" })">我的入库</a></li>
    <li><a href="@Url.Action("Index", "MyCashback", new { area = "MyData" })">我的付款</a></li>
</ul>

  这是一个典型的导航菜单,现在添加如下的脚本处理:
  

    $(function () {
        $(".faq-tabbable").find("li").each(function () {
            var a = $(this).find("a:first")[0];
            if ($(a).attr("href") === location.pathname) {
                $(this).addClass("active");
            } else {
                $(this).removeClass("active");
            }
        });
    })

  原理很简单,就是找到所有的li标签,对其a标签的链接地址进行判断,如何和当前浏览器的地址一致,就认为是当前应该激活的菜单,添加active类,否则就取消。
  如此,即可~~

  • 14
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值