js实现列表中单击某个链接,某个链接就变色

来源：互联网发布：cpa刷量软件编辑：程序博客网时间：2024/05/22 11:51

效果图:

这是在之前做的一个考试系统时需要用到,就随手写了一个,代码不是很规范,凑着用吧,哈哈.

<html xmlns="http://www.w3.org/1999/xhtml"><head>    <title></title>    <style type="text/css">      #div10 a        {                         float:left;             display:block;             margin-left:4px;             width:18px;             height:15px;             margin-top:10px;             text-align:center;            background-color:#ccc;             color:#fff;             font-weight:bold;             line-height:15px;            }    </style>    <script type="text/javascript">                function toggle(targetid) {             //根据id获取目标元素            target = document.getElementById(targetid);            //获取div10集合中的a元素            var as = document.getElementById("div10").getElementsByTagName("a");            if (target.style.background == "#ccc") {                for (var i = 0; i < as.length; i++) {                    as[i].style.background = "#ccc";                }                    target.style.background = "red";                } else {                                       for (var i = 0; i < as.length; i++) {                        as[i].style.background = "#ccc";                    }                target.style.background = "red";                }            }              </script></head><body><div id="div10" style=" width:100px;"></div></body><!--动态在div10中添加<a>元素--> <script>     for (var i = 1; i <= 30; i++) {         document.getElementById("div10").innerHTML += "<a id=a" + i + " href=#" + i + " onclick=toggle('a" + i + "') style=display:block;>" + i + "</a>";     }     </script></html>