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

时间 2019-11-14

标签动态添加 active 实现导航效果栏目 JavaScript 繁體版

原文原文链接

代码思路:html

页面4:url

页面5:spa

代码思路:code

经过jq获取你打开页面的连接 window.location.pathname；htm

在HTML中给本身的li加入一个ID id的命名与网址连接中的href相同 blog

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

而后。。就没有而后了。。。io

jq代码：function

$(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代码：class

<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>

喜欢的朋友能够去试试 ^_^ 转载清注明出处！！！