运用js写的一个小例子，实现点击不同的标签出现不同的内容：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta chaset="utf-8">
5 <script>
6 function nav(obj, x)
7 {
8 var a = obj.parentNode.parentNode.children;
9 for(var i =0;i<a.length;i++) {
10 a[i].style="border:1px solid red";
11 }
12 obj.parentNode.style="border-bottom:white;";
13 var div = document.getElementsByName("Div");
14 for(var i =0;i<div.length;i++) {
15 div[i].style.display="none";
16 div[x].style.display="";
17 }
18 }
19 </script>
20 <style>
21 ul{list-style:none;}
22 ul li{border: 1px solid red;float:left;padding:10px }
23 .li{padding:0;width:200px;margin-top:42px}
24 .active{
25 border-bottom:white;
26 }
27 a{text-decoration:none;}
28 div{padding:100px}
29 div h1{text-align:center;}
30 </style>
31 </head>
32 <body>
33 <ul>
34 <li class="li"></li>
35 <li class="active"><a href="#" onclick="nav(this, 0)">导航1</a></li>
36 <li><a href="#" onclick="nav(this, 1)">导航2</a></li>
37 <li><a href="#" onclick="nav(this, 2)">导航3</a></li>
38 <li class="li"></li>
39 </ul>
40 <div id="div1" name="Div"><h1>内容1</h1></div>
41 <div id="div2" name="Div" style="display:none"><h1>内容2</h1></div>
42 <div id="div3" name="Div" style="display:none"><h1>内容3</h1></div>
43 </body>
44 </html>
45
时间： 2024-12-12 12:04:41