本文介绍了一种使用JavaScript实现点击列表文字后,自动为当前行添加背景颜色的网页特效。通过监听鼠标点击事件,动态修改列表项的class属性,从而改变其背景样式,适用于需要高亮选中项的场景。
JavaScript实现列表点击高亮功能
本文通过具体实例,展示了如何利用JavaScript实现点击列表中的文字,使对应行显示特定背景颜色的功能。该示例主要演示了如何控制HTML列表元素(li),在用户鼠标点击时自动为其添加class属性,从而生成具有自定义背景色的列表特效。运行效果如下图所示:

<style type="text/css">
li{cursor:pointer;}
.cur{background:red;}
</style>
<script type="text/javascript">
window.onload = function ()
{
var aLi = document.getElementsByTagName("li");
var i = 0;
for (i = 0; i < aLi.length; i++)
{
aLi[i].onclick = function ()
{
for (i = 0; i < aLi.length; i++) aLi[i].className = "";
this.className = "cur";
};
}
};
</script>
<div class="clMenu">
<ul>
<li>1</li>
<li>2</li>
<li>4</li>
<li>5</li>
</ul>
</div>
希望上述关于JavaScript程序设计的介绍能对读者有所帮助。