此代碼基于vue

html

<div class="banner" name="top"><ul><li :class="{active:this.getUrl() == 'index'}"><a href="index.html" >首&nbsp;&nbsp;頁</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];}

總結

以上是生活随笔為你收集整理的点击给导航条加背景颜色的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。