1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>选项卡</title>
5 <meta http-equiv="content-type" content="text/html" charset="utf-8" accesskey=""/>
6 <script type="text/javascript" src="jquery-1.8.3.js"></script>
7 <style type="text/css">
8 body,div,ul,li{
9 margin: 0;
10 padding: 0;
11 }
12 ul{
13 width: 405px;
14 margin: auto;
15 overflow: hidden;
16 }
17 li{
18 list-style: none;
19 float: left;
20 width: 100px;
21 height: 30px;
22 line-height: 30px;
23 text-align: center;
24 border: 1px solid #848484;
25 border-right: none;
26 overflow: hidden;
27 cursor: pointer;
28 }
29 li:first-child{
30 border-bottom: 1px solid #fff;
31 }
32 li:last-child{
33 border-right: 1px solid #848484;
34 }
35 #wrap{
36 width: 403px;
37 margin: 70px auto;
38 text-align: center;
39 position: relative;
40 }
41 #wrap div{
42 position: absolute;
43 text-align: center;
44 width: 100%;
45 height: 200px;
46 line-height: 100px;
47 display: none;
48 border: 1px solid #848484;
49 border-top: none;
50 }
51 #wrap div:first-of-type{
52 display: block;
53 }
54 </style>
55 </head>
56 <body>
57 <div id="wrap">
58 <ul>
59 <li name="one"> 许嵩</li>
60 <li name="two">周杰伦</li>
61 <li name="three">林俊杰</li>
62 <li name="four">陈奕迅</li>
63 </ul>
64 <div name="one" dianji="one">庐州月</div>
65 <div name="two" dianji="two">东风破</div>
66 <div name="three" dianji="three">江南 曹操</div>
67 <div name="four" dianji="four">十年 浮夸</div>
68 </div>
69 <script type="text/javascript">
70 $("li").on("click",function(){
71 $("#wrap div[name!="+$(this).attr("name")+"]").fadeOut(1000);
72 $("#wrap div[name="+$(this).attr("name")+"]").fadeIn(1000);
73 $("#wrap li[name!="+$(this).attr("name")+"]").css({"border-bottom-color":"#848484"});
74 $("#wrap li[name="+$(this).attr("name")+"]").css({"border-bottom-color":"#fff"});
75 })
76 </script>
77 </body>
78 </html>
jQuery-简单选项卡
时间： 2024-10-12 19:40:51