bootstrap導航菜單做active判斷

 

先創建2個文件，index 和about，導入bootstrap的css

  <div class="container">
        <ul class="nav nav-pills">
            <li><a href="index.html">Home</a></li>
            <li><a href="about.html">About</a></li>
        </ul>
        <h1>Home Page</h1>
    </div>

 然后導入jquery，不導入也行，原始JS寫法

 $('.nav-pills').find('a').each(function () {
            if (this.href == document.location.href || document.location.href.search(this.href) >= 0) {
                $(this).parent().addClass('active'); // this.className = 'active';
            }
        });

這樣點擊不同的導航，就可以自動添加active了。

 

就這么簡單的JS代碼，網上找了好久都不是想要的，最后還是自己修改的。