jquery实现的tab切换

查看演示效果

1、jQuery能够使用户的html页保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需定义id即可。下面跟大家分享一个jquery的tab切换 2、如何使用 调用jquery文件 script type=text/javascript src=jquery.js/script jquery实现ta

 

1、jQuery能够使用户的html页保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需定义id即可。下面跟大家分享一个jquery的tab切换

  

2、如何使用

 

调用jquery文件

 

<script type="text/javascript" src="jquery.js"></script> 

 

jquery实现tab效果

 

<script>

$(function(){

$("div [id^='tabcc_']").each(

  function(i,ob){

  $(ob).find('a').bind

  ('mouseover',function(){

   $(ob).find('a').removeClass('on');

   $(this).addClass('on');

   var cid=$(this).attr('cid');

   $(ob).siblings('div').hide();

   $(ob).siblings("div[id='courseList_"+cid+"']").show();

  });

});

})

</script>

 

2、关于tab的html结构

 

<div class="manage">

   <div class="manage_title" id="tabcc_0">

       <a href="/opencourse/501/index.htm"  cid="501" class='on'>战略管理</a> 

       <a href="/opencourse/502/index.htm"  cid="502" >市场营销</a> 

       <a href="/opencourse/505/index.htm"  cid="503" >采购管理</a> 

    </div>      

     <div class="manage_txt" id="courseList_501" style="display:block; height:100px; padding:20px;">

     789

     </div>

    <div class="manage_txt" id="courseList_502" style="display:none; height:100px; padding:20px; ">

     456

    </div>

    <div class="manage_txt" id="courseList_503" style="display:none; height:100px; padding:20px; ">

     123

    </div>

</div>

这个tab切换可以一个页面多个使用,适用于不同结构的tab切换

所属频道:JS代码/更新时间:2014-10-24
相关JS代码
@2014 www.120muban.com模板库