先创建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代码，网上找了好久都不是想要的，最后还是自己修改的。

版权声明：本文为jiujian原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/jiujian/p/5148668.html