导航点击跳转后选项更换

Question

1.用的是bootstrap导航

html的结构是

<nav>

    <ul>

        <li class="active">

            <a>

然后有

<a href="/">首页</a>

<a href="/product">产品</a>

<a href="/help">帮助</a>

等等

想实现的效果：点击后跳转到指定页面之后，对应的选项添加一个Class="active"

也就是:比如点了产品页.跳转到产品页,产品页那个就变成

<li class="active"><a href="/product">产品</a></li>

其他选项变成

<li><a href="/...">产品</a></li>

Answer 1

可以通过js获取url来添加修改active

Answer 2

给这个ul增加一个id;通过js判断//html<nav>&nbsp; &nbsp; <ul id="test>&nbsp; &nbsp; &nbsp; &nbsp; <li class="active"><a href="/">首页</a></li>&nbsp; &nbsp; &nbsp; &nbsp; <li><a href="/product">产品</a></li>&nbsp; &nbsp; &nbsp; &nbsp; <li><a href="/help">帮助</a></li>&nbsp; &nbsp;</ul></nav>//js$(function(){&nbsp; $("#test li").click(function() {&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; $(this).siblings('li').removeClass('active');&nbsp; // 删除选中的其他兄弟元素的样式&nbsp; &nbsp;&nbsp; &nbsp; $(this).addClass('active');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // 添加当前元素的样式&nbsp; &nbsp;&nbsp;&nbsp; });});&nbsp;