jQuery-简单选项卡

浏览数：24 / 时间：2015年06月09日

 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>