点击改变标签样式

最新推荐文章于 2022-05-10 10:13:54 发布

原创最新推荐文章于 2022-05-10 10:13:54 发布 · 2.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#function #javascript #list #server #html

本文介绍了三种不同的方法来实现网页中列表项的点击高亮效果。第一种方法通过JavaScript遍历所有列表项并为它们添加点击事件，使得被点击的列表项背景变为红色，同时移除其他列表项的高亮状态。第二种方法则直接在HTML标签中使用内联JavaScript为列表项添加点击事件，改变被点击列表项的背景颜色。第三种方法利用函数封装了列表项的点击行为，并通过修改类名来切换样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

METHOD1:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    <script type="text/javascript">
   function change()

       {
            var lis=document.getElementsByTagName("li");
          for(var i=0; i<lis.length; i++)
       {

lis[i].onclick=function()

                 {
                          for(var j=0; j<lis.length; j++)
                         {
                                lis[j].className="";
           }
         this.className="style1";
                   };
           }
        }
</script>
<style type="text/css">
      .style1
      {
        background-color:red;
      }
      </style>
</head>
<body onload='change()'>
    <ul>
        <li>aaaaaaa</li>
        <li>bbbbbbb</li>
        <li>ccccccc</li>
    </ul>
</body>
</html>

METHOD2:
<ul>
    <li onclick="this.style.backgroundColor='red'">afsdfas</li>
</ul>

METHOD3:
<script language="javascript">
function hc(obj,cssname) {
    var list = document.getElementsByTagName("li");
    for(i=0; i<list.length; i++){
            list[i].className = "";
    }
    obj.className = cssname;
}
</script>
<style type="text/css">
.linow { background-color:red;}
</style>
</head>
<body>
<ul>
    <li onClick="hc(this,'linow')">aaaaaaaaa</li>
    <li onClick="hc(this,'linow')">bbbbbbbb</li>
    <li onClick="hc(this,'linow')">cccccccc</li>
    <li onClick="hc(this,'linow')">ddddddddd</li>
</ul>