此代码基于vue
html
<div class="banner" name="top">
<ul>
<li :class="{active:this.getUrl() == 'index'}"><a href="index.html" >首 页</a></li>
<li :class="{active:this.getUrl() == 'aboutUs'}"><a href="aboutUs.html">关于我们</a></li>
</ul>
</div>
css部分
.banner ul li{
float: left;
margin-right: 10px;
width: 90px;
height: 80px;
line-height: 80px;
text-align: center;
}
.banner ul li.active{
color: #fff;
background-color: #2cb7a5;
}
.banner ul li.active a{
color: #fff;
}
js部分
getUrl(){
var a = location.href;
var b = a.split("/");
var c = b.slice(b.length-1, b.length).toString(String).split(".");
return c.slice(0, 1)[0];
}