js导航栏单击事件背景颜色变换 

 1 <head>
 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 3 <title>无标题文档</title>
 4 <script type="text/javascript">
 5 function change_bg(obj)
 6 {
 7     var a=document.getElementById("Menu").getElementsByTagName("a");
 8     for(var i=0;i<a.length;i++)
 9     {
10         a[i].className="";
11     }
12     obj.className="current";
13 }
14 </script>
15 <style type="text/css">
16 body{
17     font-size:17px;    
18 }
19 .current{
20     background:red;    
21 }
22 #container ul
23 {
24     list-style-type:none;
25 }
26 #container ul li
27 {
28     float:left;
29     margin-right:3px;
30 }
31 #container ul li a{
32 text-decoration:none;
33 color:#000;
34  
35 }
36 </style>
37 </head>
38 <body>
39 <div id="container">
40 <ul id="Menu">
41 <li><a href="javascript:" onclick="change_bg(this)" class="current">Menu1</a></li>
42 <li><a href="javascript:" onclick="change_bg(this)">Menu2</a></li>
43 <li><a href="javascript:" onclick="change_bg(this)">Menu3</a></li>
44 <li><a href="javascript:" onclick="change_bg(this)">Menu4</a></li>
45 <li><a href="javascript:" onclick="change_bg(this)">Menu5</a></li>
46 </ul>
47 </div>
48 </body>
49 </html>

 

posted @ 2015-10-08 22:05  哟风  Views(2123)  Comments(0)    收藏  举报