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>

 

<!--使用google cdn的js库-->
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">// <![CDATA[
    google.load("jquery", "1.3.2");
// ]]></script>
<script type="text/javascript">// <![CDATA[
    
    //tab的基本实现
    google.setOnLoadCallback(function(){
            //先将其他菜单 内容 隐藏
              $(".tabContentWrapper div:not(:first)").hide();
            //注册菜单的点击事件
               $(".menu div").each(function(index){
               $(this).click(
                     function(){
                      //先设置菜单current
                      $(".menuCurrent").removeClass("menuCurrent");
                      $(this).addClass("menuCurrent");
                      //再显示内容
                      $(".tabContentWrapper > div:visible").hide();
                      $(".tabContentWrapper div:eq(" + index + ")").fadeIn();
                  });
               });
        });
// ]]></script>