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>

<!--
.menuCurrent{
color:red;
}
-->