运用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