点击选项卡标签，可以显示不同的内容，截图如下：
代码如下：
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>
时间： 2024-08-04 17:02:43