假如我们页面有一些链接如下：
<li class="left_link" onClick="selemenu(this)"><a href="/xiaoshuo/xsneirong.php" target="main">小说内容库</a></li>
<li class="left_link" onClick="selemenu(this)"><a href="/xiaoshuo/zhangjie.php" target="main">章节名称库</a></li>
<li class="left_link" onClick="selemenu(this)"><a href="/xiaoshuo/zuozhe.php" target="main">作者名字库</a></li>
我们想让 当前点击访问的链接改变背景颜色
第一步：
在页面底部增加一个JS脚本:
<script>
function selemenu(element) {
// Remove "active" class from all list items
var links = document.getElementsByClassName("left_link");
for (var i = 0; i < links.length; i++) {
links[i].classList.remove("active");
}
// Add "active" class to the clicked list item
element.classList.add("active");
}
</script>
这个脚本的作用就是 当你点击 第一个链接的时候 就会给第一个链接的CSS属性 增加一个 active 属性如下图
实现这一步，后面的就简单多了，只需要给 这个CSS属性单独赋值就可以了
li.active {
background-color: #ff6600 !important;
}
由于默认的li就带着背景颜色，所以我给他强制声明背景颜色。
实现效果如下：
