此代碼基于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];}

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。