素材牛VIP会员
导航点击跳转后选项更换
 西***千  分类:JavaScript  人气:974  回帖:3  发布于6年前 收藏

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>

讨论这个帖子(3)垃圾回帖将一律封号处理……

Lv1 新人
袜***了 PHP开发工程师 6年前#1

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

Lv3 码奴
路***甲 移动开发工程师 6年前#2

在脚本里获取 URL 中的信息来找和 <a href="...."> 中的对应关系,然后给找到的 <a> 添加 active 类。

既然你的页面是刷新的,但导航是公共的,这部分代码可以写在公共区域的尾部,立即执行或者在 ready 事件中执行都可以。

关键是要把 url 分析准确,能正确匹配到 <a> 上去。

Lv4 码徒
进***新 学生 6年前#3

给这个ul增加一个id;通过js判断

//html
<nav>
    <ul id="test>
        <li class="active"><a href="/">首页</a></li>
        <li><a href="/product">产品</a></li>
        <li><a href="/help">帮助</a></li>
   </ul>
</nav>

//js
$(function(){
  $("#test li").click(function() {    
    $(this).siblings('li').removeClass('active');  // 删除选中的其他兄弟元素的样式   
    $(this).addClass('active');                    // 添加当前元素的样式    
  });
}); 
 文明上网,理性发言!   😉 阿里云幸运券,戳我领取