JQuery Tab菜单的实现

一个tab面板

<div id="tab">
<div class="menu">
<div class="menuItem">1</div>
<div class="menuItem">2</div>
<div class="menuItem">3</div>
<div class="menuItem">4</div>

  </div>
<div class="tabContentWrapper">
<div>这里是Tab1的内容</div>
<div>这里是Tab2的内容</div>
<div>这里是Tab3的内容</div>
<div>这里是Tab4的内容</div>

  </div>

</div>

 

 1 <!--使用google cdn的js库-->
 2 <script type="text/javascript" src="http://www.google.com/jsapi"></script>
 3 <script type="text/javascript">// <![CDATA[
 4     google.load("jquery", "1.3.2");
 5 // ]]></script>
 6 <script type="text/javascript">// <![CDATA[
 7     
 8     //tab的基本实现
 9     google.setOnLoadCallback(function(){
10             //先将其他菜单 内容 隐藏
11               $(".tabContentWrapper div:not(:first)").hide();
12             //注册菜单的点击事件
13                $(".menu div").each(function(index){
14                $(this).click(
15                      function(){
16                       //先设置菜单current
17                       $(".menuCurrent").removeClass("menuCurrent");
18                       $(this).addClass("menuCurrent");
19                       //再显示内容
20                       $(".tabContentWrapper > div:visible").hide();
21                       $(".tabContentWrapper div:eq(" + index + ")").fadeIn();
22                   });
23                });
24         });
25 // ]]></script>