标签：
点击选项卡标签，可以显示不同的内容，截图如下：
代码如下：
1 <!DOCTYPE html> 2 <html lang="zh-hans"> 3 4 <head> 5 <meta charset="utf-8"> 6 <title>My Webpage</title> 7 <style type="text/css"> 8 *{ 9 margin: 0; 10 padding: 0; 11 } 12 .table_card{ 13 width:500px; 14 margin: auto; 15 background-color: #eee; 16 } 17 .nav_tab{ 18 width: 100%; 19 float: left; 20 } 21 .nav_tab ul li{ 22 list-style: none; 23 float: left; 24 background-color: #ccc; 25 border-right: 1px solid #333; 26 line-height: 1.5em; 27 padding: 0 0.5em; 28 } 29 .nav_tab ul{ 30 float: left; 31 } 32 .content{ 33 border: 1px solid #333; 34 float: left; 35 width: 99%; 36 } 37 .clear{ 38 clear: both; 39 } 40 .hide{ 41 display: none; 42 } 43 ul li.current{ 44 background-color: #ff9900; 45 } 46 </style> 47 <script type="text/javascript" src="jquery.js"></script> 48 <script type="text/javascript"> 49 $(function(){ 50 //init the content 51 $("div.current").siblings().addClass("hide"); 52 53 $("li").click(function(){ 54 var $tag_name = $(this).attr("class").toLowerCase(); 55 $content_selecter = "div." + $tag_name; 56 // highlight the table tag 57 $(this).addClass("current").siblings().removeClass("current"); 58 //show the current content, and hide other content divs 59 $($content_selecter).removeClass("hide").siblings().addClass("hide"); 60 }); 61 62 63 }); 64 65 </script> 66 </head> 67 <body> 68 <div class="table_card"> 69 70 <div class="nav_tab"> 71 <ul> 72 <li class="current news">News</li> 73 <li class="sports">Sports</li> 74 <li class="movies" style="border-right:none;">Movies</li> 75 </ul> 76 </div> 77 78 <div class="content"> 79 <div class="news current"> 80 this is news 81 </div> 82 83 <div class="sports"> 84 this is sports 85 </div> 86 87 <div class="movies"> 88 this is movies 89 </div> 90 </div> 91 <div class="clear"></div> 92 </div> 93 </body> 94 95 </html>
标签：
原文地址：http://www.cnblogs.com/huaziking/p/4532928.html
