jq 动态添加.active 实现导航效果

最新推荐文章于 2023-11-08 22:53:19 发布

qq_29069777

最新推荐文章于 2023-11-08 22:53:19 发布

阅读量373

点赞数

分类专栏：前端文章标签：导航 active jq

原文链接：https://www.mk2048.com/blog/blog.php?id=hi1cjjahah2j&title=jq+%E5%8A%A8%E6%80%81%E6%B7%BB%E5%8A%A0.active+%E5%AE%9E%E7%8E%B0%E5%AF%BC%E8%88%AA%E6%95%88%E6%9E%9C

版权

前端专栏收录该内容

1175 篇文章 2 订阅

订阅专栏

代码思路:

页面4:

页面5:

代码思路:

通过jq获取你打开页面的链接 window.location.pathname；

在HTML中给自己的li加入一个ID id的命名与网址链接中的href相同

通过jq包含方法找到相对应的li给他加入active类名

然后。。就没有然后了。。。

jq代码：

$(function () {

    var li = $(".title_ul").children("li");

    for (var i = 0; i < li.length; i  ) {
        var url = window.location.pathname;
        var url = url.replace("/", "");
        if (url.indexOf(li[i].id)!=-1) {
            li[i].firstChild.className = "active";

        } else {
            li[i].firstChild.className = "";
        }
    }
})

html代码：

<body>
<div class="title">
  <ul class="title_ul">
    <li id="index"><a href="index.html" class="">页面1</a></li>
    <li id="zf"><a href="zf.html" class="">页面2</a></li>
    <li id="gc"><a href="gc.html" class="">页面3</a></li>
    <li id="hc"><a href="hc.html" class="">页面4</a></li>
    <li id="shwt"><a href="shwt.html" class="">页面5</a></li>
  </ul>
</div>
</body>