jquery实现的tab切换

模板网 2014-10-24

 

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切换

&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;

相关文章

  1. JS判断手机访问函数

    函数is_mobile()手机端返回true,PC端返回false,根据返回值来判断时候是手机端访问,然后做相应的操作。 复制代码 代码如下: script function is_mobile() { var regex_match = /(nokia|iphone|android|motorola|^mot-|softbank|foma|docomo|kddi|up.browse

  2. html5输入框正则验证

    html5输入框正则验证,输入框禁止粘贴,禁止右键菜单。

  3. 假404效果代码

    假404效果代码,使用frameset框架覆盖原网页内容,实现网页打不开的假象,直接在网站头部引用404.js即可。 代码下载: 假404效果代码 效果截图:

  4. JS禁止复制网站文章代码

    JS禁止复制网站文章代码,可以实现网页上的文本无法复制,在网页上右键不显示弹出菜单。 实现原理是在网页的body标签中添加一下代码: 复制代码 代码如下: onmouseup=document.selection.empty() oncontextmenu=return false onselectstart=return false ond

  5. JS强制弹出QQ对话框

    JS强制弹出QQ对话框,需要访客电脑上已安装QQ,并且浏览器中启用了QQ对话插件(基本99%的访客满足条件)。 复制代码 代码如下: script //采用定时器延时弹出,不想延时可去除定时器,直接使用以下代码 //window.location.href = tencent://message/?uin=1413

随机推荐

  1. JS判断手机访问函数

    函数is_mobile()手机端返回true,PC端返回false,根据返回值来判断时候是手机端访问,然后做相应的操作。 复制代码 代码如下: script function is_mobile() { var regex_match = /(nokia|iphone|android|motorola|^mot-|softbank|foma|docomo|kddi|up.browse

  2. html5输入框正则验证

    html5输入框正则验证,输入框禁止粘贴,禁止右键菜单。

  3. 假404效果代码

    假404效果代码,使用frameset框架覆盖原网页内容,实现网页打不开的假象,直接在网站头部引用404.js即可。 代码下载: 假404效果代码 效果截图:

  4. JS禁止复制网站文章代码

    JS禁止复制网站文章代码,可以实现网页上的文本无法复制,在网页上右键不显示弹出菜单。 实现原理是在网页的body标签中添加一下代码: 复制代码 代码如下: onmouseup=document.selection.empty() oncontextmenu=return false onselectstart=return false ond

  5. JS强制弹出QQ对话框

    JS强制弹出QQ对话框,需要访客电脑上已安装QQ,并且浏览器中启用了QQ对话插件(基本99%的访客满足条件)。 复制代码 代码如下: script //采用定时器延时弹出,不想延时可去除定时器,直接使用以下代码 //window.location.href = tencent://message/?uin=1413