码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2015-10-08 23:10:07      阅读:198      评论:0      收藏:0      [点我收藏+]

标签:

 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>

 

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

标签:

原文地址:http://www.cnblogs.com/houmin0036/p/4862487.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!