点击改变标签样式

来源：互联网发布：淘宝菁月冰天编辑：程序博客网时间：2024/05/16 00:59

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>