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