一站式百度SEO排名优化!-找老刘SEO低投入,高转化,精益求精、一丝不苟:旨在提供更好的SEO服务!

首页>>老刘专栏

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

首页 2019-07-04 老刘专栏 223 ℃ Tags: tab切换 选项卡滑动切换


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


qq新闻tab滑动切换



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


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

12.jpg

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中经常有闪烁情况发生。



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


2.gif

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

1562232721220734.jpg

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


搜索
分类
热门标签
  • 首页
  • 电话
  • QQ
  •  
    联系老刘手机
    13524017402
    联系老刘微信
    扫描微信二维码