使用js实现tab选项卡滑动切换效果

首先，让我们看看选项卡效果是什么样的。以经常能遇到的QQ新闻为例，它具有以下效果:

当鼠标滑过相关标题时，对应于该标题的内容将会出现。这是选项卡的滑动切换效果。选项卡效果还包括延迟切换和自动切换效果。今天，让我们学习选项卡滑动效果。

html代码使用两个div来包含标题和内容，因此标题数和内容数必须相同。 详细的html代码和CSS代码如下所示：

html代码：

<div id="tabbox">   

    <ul class="tabs sjwu" id="tabs2">

       <li>友情链接</li>

       <li>底部导航</li>

    </ul>

    <ul class="tab_conbox sjwu" id="tab_conbox2">

        <li class="tab_con">

          <p>      

<a href='/' target='_blank'>合肥SEO</a> 

      </p>

        </li>

        <li class="tab_con">

          <p>      

      <a href='/content/89.html' target='_blank'>单页面做优化</a> 

         </p>

        </li>

</ul>

</div>

css代码就不贴了，有兴趣的朋友直接用DevTool工具查看；

拖动转换实际效果，简而言之，就是说当鼠标滑过的那时候，显示信息题目下的內容。必须将当前的标题样式设置为选定状态，在同一时间将该标题下的內容设置为显示，即设置样式display:block，而其他标题下的内容设置为隐藏，即设置样式display:none。详细的javascript代码如下所示：

<script type="text/javascript">

$(document).ready(function() {

jQuery.jqtab = function(tabtit,tab_conbox,shijian) {

$(tab_conbox).find("li").hide();

$(tabtit).find("li:first").addClass("thistab").show(); 

$(tab_conbox).find("li:first").show();

$(tabtit).find("li").bind(shijian,function(){

  $(this).addClass("thistab").siblings("li").removeClass("thistab"); 

var activeindex = $(tabtit).find("li").index(this);

$(tab_conbox).children().eq(activeindex).show().siblings().hide();

return false;

});

};

/*调用方法如下：*/

$.jqtab("#tabs","#tab_conbox","click");

$.jqtab("#tabs2","#tab_conbox2","mouseenter");

});

</script>

注：Mouseover：不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。

Mouseenter：只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。

这里使用的是Mouseenter，mouseenter子元素不会反复触发事件，否则在IE中经常有闪烁情况发生。

在浏览器中的效果如下所示：

当鼠标过相关标题的时候，标题中对应的内容则会显示出来（没错就是网站底部的tab切换）。

今天，我和大家分享了Tab的滑动切换效果，希望给大家一个热身，掌握Tab的原理。其实滑动切换、延时切换和自动切换三种效果相对容易实现。要是发觉有的地方填错了或是写的不太好，可以给我留言，欢迎大伙儿指点迷津！我们一起来加油！感谢阅读。

当前位置：首页>>老刘专栏>>使用js实现tab选项卡滑动切换效果