一个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>
