jquery实现的tab切换

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

2、如何使用

调用jquery文件

jquery实现tab效果

$(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>

789

</div>

456

</div>

123

</div>

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

&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xml:lang=&quot;en&quot;&gt;
&lt;head&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html;charset=gb2312&quot; /&gt;
&lt;title&gt;&lt;/title&gt;
&lt;script src=&quot;http://libs.baidu.com/jquery/1.9.0/jquery.js&quot;&gt;&lt;/script&gt;
&lt;script&gt;
$(function(){
$(&quot;div [id^=&#039;tabcc_&#039;]&quot;).each(
  function(i,ob){
  $(ob).find(&#039;a&#039;).bind
  (&#039;mouseover&#039;,function(){
   $(ob).find(&#039;a&#039;).removeClass(&#039;on&#039;);
   $(this).addClass(&#039;on&#039;);
   var cid=$(this).attr(&#039;cid&#039;);
   $(ob).siblings(&#039;div&#039;).hide();
   $(ob).siblings(&quot;div[id=&#039;courseList_&quot;+cid+&quot;&#039;]&quot;).show();
  });
});
})
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class=&quot;manage&quot;&gt;
  &lt;div class=&quot;manage_title&quot; id=&quot;tabcc_0&quot;&gt; &lt;a href=&quot;/opencourse/501/index.htm&quot;  cid=&quot;501&quot; class=&#039;on&#039;&gt;战略管理&lt;/a&gt; &lt;a href=&quot;/opencourse/502/index.htm&quot;  cid=&quot;502&quot; &gt;市场营销&lt;/a&gt; &lt;a href=&quot;/opencourse/505/index.htm&quot;  cid=&quot;503&quot; &gt;采购管理&lt;/a&gt; &lt;/div&gt;
  &lt;div class=&quot;manage_txt&quot; id=&quot;courseList_501&quot; style=&quot;display:block; height:100px; padding:20px;&quot;&gt; 789 &lt;/div&gt;
  &lt;div class=&quot;manage_txt&quot; id=&quot;courseList_502&quot; style=&quot;display:none; height:100px; padding:20px; &quot;&gt; 456 &lt;/div&gt;
  &lt;div class=&quot;manage_txt&quot; id=&quot;courseList_503&quot; style=&quot;display:none; height:100px; padding:20px; &quot;&gt; 123 &lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

随机推荐

QQ添加好友代码
QQ添加好友代码复制代码代码如下: a href=tencent://AddContact/?fromId=50fromSubId=1subcmd=alluin=12345678加个好友吧/a
JS手机端跳转代码
JS手机端跳转代码，通过判断浏览器版本来判断是手机端还是PC端，然后可以做相应的操作。能够判断IE内核，opera内核，苹果、谷歌内核，火狐内核，是否为移动终端，android终端或者uc浏览器，是否为iPhone或者QQHD浏览器，是否iPad，是否web应该程序，没有头
JS实现百叶窗效果
JS实现百叶窗效果，适合做专家介绍，设备技术等介绍效果。效果演示中使用的是纯色图片，将对应的图片替换即可。引用slider.js文件在底部调用初始化代码script type=text/javascriptslider.init();/script ，演示效果中为方便起见将slider.js中的代码整合到
JS网页标题滚动效果实现代码
JS网页标题滚动效果实现代码，标题不间断自右向左滚动。代码简单容易理解，加快或减慢滚动速度只需修改setInterval函数的时间参数即可，本效果默认时间间隔是400毫秒。
移动端全屏滚动插件 zepto.fullpage.js
zepto.fullpage 是专注于移动端的 fullPag e.js ，依赖 Ze pto 。下载地址: https://github.com/yanhaijing/zepto.fullpage 功能概述可实现移动端的单页滚动效果，可自定义参数，提供回调接口，和公开接口。兼容性 Ios4+ Andriod2.3+（未全部覆盖）快速

jquery实现的tab切换

相关文章

随机推荐