jQuery实现简单的tab切换 

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="gb2312">
 5 <meta http-equiv="X-UA-Compatible" content="IE=7">
 6 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 7 <script type="text/javascript">
 8     $(function(){
 9         $(".menu a").click(function(){
10             $(this).addClass("curr").siblings().removeClass("curr");
11             $(".text div").eq($(this).index()).show().siblings().hide();
12         });
13     });
14 </script>
15 <title>简单的tab切换</title>
16 <style>
17 *{margin:0;padding:0}
18 .menu{width:500px;margin:20px auto}
19 .menu a{display:inline-block;width:100px;height:35px;line-height:35px;text-align:center;color:#000;background:#ccc}
20 .menu a.curr{background:#06f;color:#fff;font-weight:bold}
21 .text{width:480px;height:170px;padding:10px;font-size:20px;border:1px solid #ccc}
22 .hide{display:none}
23 </style>
24 </head>
25 
26 <body>
27 <div class="menu">
28     <a href="javascript:;" class="curr">Tab1</a>
29     <a href="javascript:;">Tab2</a>
30     <a href="javascript:;">Tab3</a>
31     <a href="javascript:;">Tab4</a>
32     <div class="text">
33         <div>我是内容1111111111我是内容111111111</div>
34         <div class="hide">我是内容2222222222我是内容2222222222</div>
35         <div class="hide">我是内容33333333我是内容33333333</div>
36         <div class="hide">我是内容444444444我是内容44444444</div>
37     </div>
38 </div>
39 </body>
40 </html>

posted on 2012-11-05 17:23  Cosimo  阅读(300)  评论(0)  编辑  收藏  举报

导航