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>

喜歡的朋友能夠去試試 ^_^ 轉載清註明出處！！！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。