JavaScript实现点击列表项高亮当前行的方法

作者:交互手记时间:2026-10-29 13:13:41浏览:659

本文介绍了一种使用JavaScript实现点击列表文字后,自动为当前行添加背景颜色的网页特效。通过监听鼠标点击事件,动态修改列表项的class属性,从而改变其背景样式,适用于需要高亮选中项的场景。

JavaScript实现列表点击高亮功能

本文通过具体实例,展示了如何利用JavaScript实现点击列表中的文字,使对应行显示特定背景颜色的功能。该示例主要演示了如何控制HTML列表元素(li),在用户鼠标点击时自动为其添加class属性,从而生成具有自定义背景色的列表特效。运行效果如下图所示:

JavaScript实现列表点击高亮功能


<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程序设计的介绍能对读者有所帮助。

作者最新文章