如何实现tabs选项卡效果

Posted 2023-04-16

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何实现tabs选项卡效果相关的知识，希望对你有一定的参考价值。

参考技术A 前段时间写了个tabs 选项卡切换效果，今天抽空在原有的基础上进行了扩展，加入了自动轮播，这样就变成了类似图片轮播的效果了。
html 代码：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>js-tabs</title>
<link rel="stylesheet" type="text/css" href="../css/base.css" media="all"/>
<style type="text/css">
acolor:#a0b3d6;
.tabsborder:1px solid #a0b3d6;margin:100px;width:300px;
.tabs-nav abackground:#eaf0fd;line-height:30px;padding:0 20px;display:inline-block;border-right:1px solid #a0b3d6;border-bottom:1px solid #a0b3d6;float:left;
.tabs-nav .select1,.tabs-nav .select2,.tabs-nav .select3,.tabs-nav .select4background:white;border-bottom:1px solid white;_position:relative;
.tabs-contentpadding:20px;border-top:1px solid #a0b3d6;margin-top:-1px;
</style>
</head>
<body>
<div class="tabs" id="tabs">
<h2 class="tabs-nav clearfix">
<a href="javascript:;">首页</a>
<a href="javascript:;">技术</a>
<a href="javascript:;">生活</a>
<a href="javascript:;">作品</a>
</h2>
<p class="tabs-content">首页首页首页首页首页首页首页首页首页首页</p>
<p class="tabs-content">技术技术技术技术技术技术技术技术技术技术</p>
<p class="tabs-content">生活生活生活生活生活生活生活生活生活生活</p>
<p class="tabs-content">作品作品作品作品作品作品作品作品作品作品</p>
</div>
<br/><br/>
<div class="tabs" id="tabs2">
<h2 class="tabs-nav clearfix">
<a href="javascript:;">11111</a>
<a href="javascript:;">22222</a>
<a href="javascript:;">33333</a>
</h2>
<p class="tabs-content">11111111111111111111111111111111111</p>
<p class="tabs-content ">222222222222222222222222222222222222</p>
<p class="tabs-content ">333333333333333333333333333333333333333</p>
</div>
</body>
</html>
<script type="text/javascript" src="tabs.js"></script>
<script type="text/javascript">
window.onload = function()
tabs('tabs','click',true,1000);
tabs('tabs2','mouseover');

</script>

tabs.js 代码：

function tabs(id,trigger,autoplay,time)
var tabsWrap = document.getElementById(id);
var tabsBtn = tabsWrap.getElementsByTagName('h2').getElementsByTagName('a');
var tabsContent = getClass('tabs-content',tabsWrap);
var timer = null;
var current = 0;
show(0);
for(var i = 0,len = tabsBtn.length; i < len; i++)
tabsBtn[i].index = i;
if(trigger == 'click')
tabsBtn[i].onclick = function()
show(this.index);

else if(trigger == 'mouseover')
tabsBtn[i].onmouseover = function()
show(this.index);

if(autoplay)
autoPlay();
tabsWrap.onmouseover = function()
clearInterval(timer);

tabsWrap.onmouseout = function()
autoPlay();

function autoPlay()
timer = setInterval(function()
show(current);
current++;
if(current >= tabsBtn.length)
current = 0;

,time);

function show(n)
current = n;
for(var i = 0,len = tabsBtn.length; i < len; i++)
tabsBtn[i].className = '';
tabsContent[i].style.display = 'none';

tabsBtn[current].className = 'select' + (current + 1);
tabsContent[current].style.display = 'block';

function getClass(classname,obj)
var results = [];
var elems = obj.getElementsByTagName('*');
for(var i = 0; i < elems.length; i++)
if(elems[i].className.indexOf(classname) != -1)
results[results.length] = elems[i];

return results;

Tab选项卡自动切换效果js实现

try.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="try.css">
    <script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="notice" class="notice">
    <div class="notice-tit" id="notice-tit">
        <ul>
            <li><a href="#">公告</a></li>
            <li><a href="#">规则</a></li>
            <li><a href="#">论坛</a></li>
            <li><a href="#">安全</a></li>
            <li class="select"><a href="#">公益</a></li>
        </ul>
    </div>
    <div id="notice-con" class="notice-con">
        <div class="mod" style="display: none;">
            <ul>
                <li><a href="#">张勇：玩快乐足球</a></li>
                <li><a href="#">张勇：玩快乐足球</a></li>
                <li><a href="#">张勇：玩快乐足球</a></li>
                <li><a href="#">张勇：玩快乐足球</a></li>
            </ul>
        </div>
        <div class="mod" style="display: none;">
            <ul>
                <li><span>[<a href="#">通知</a>]</span><a href="#">张勇：要玩快乐足球</a></li>
                <li><span>[<a href="#">通知</a>]</span><a href="#">张勇：要玩快乐足球</a></li>
                <li><span>[<a href="#">通知</a>]</span><a href="#">张勇：要玩快乐足球</a></li>
                <li><span>[<a href="#">通知</a>]</span><a href="#">张勇：要玩快乐足球</a></li>
            </ul>
        </div>
        <div class="mod" style="display: none;">
            <ul>
                <li><span>[<a href="#">通知</a>]</span><a href="#">张勇：玩快乐足球</a></li>
                <li><span>[<a href="#">通知</a>]</span><a href="#">张勇：玩快乐足球</a></li>
                <li><span>[<a href="#">通知</a>]</span><a href="#">张勇：玩快乐足球</a></li>
                <li><span>[<a href="#">通知</a>]</span><a href="#">张勇：玩快乐足球</a></li>
            </ul>
        </div>
        <div class="mod" style="display: none;">
            <ul>
                <li><a href="#">张勇：要玩快乐</a></li>
                <li><a href="#">张勇：要玩快乐足球</a></li>
                <li><a href="#">张勇：要玩快乐足球</a></li>
                <li><a href="#">张勇：要玩快乐足球</a></li>
            </ul>
        </div>
        <div class="mod" style="display: block;">
            <ul>
                <li><a href="#">张勇：要玩快乐</a></li>
                <li><a href="#">张勇：要玩快乐足球</a></li>
                <li><a href="#">张勇：要玩快乐足球</a></li>
                <li><a href="#">张勇：要玩快乐</a></li>
            </ul>
        </div>
    </div>
</div>
</body>
</html>

try.css

*{
    margin: 0;
    padding:0;
    list-style: none;
    font-size: 12px;
}
.notice{
    width: 298px;
    height: 98px;
    margin: 10px;
    border: 1px solid #eee;
    overflow: hidden;
}
.notice-tit{
    height: 27px;
    position: relative;
    background-color: #f7f7f7;
}
.notice-tit ul{
    position: absolute;
    width: 301px;
    left: -1px;
}
.notice-tit ul li{
    float: left;
    width: 58px;
    height: 26px;
    text-align: center;
    line-height: 26px;
    overflow: hidden;
    padding: 0 1px;
    background: #f7f7f7;
    border-bottom: 1px solid #eee;

}
.notice-tit ul li.select{
    background: #fff;
    border-bottom-color: #fff;
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
    padding: 0;
    font-weight: bolder;
}
.notice li a:link,.notice-tit li a:visited{
    text-decoration: none;
    color: #000;
}
.notice li a:hover{
    color: #f90;
}
.notice-con .mod{
    margin: 10px 10px 10px 19px;
}
.notice-con .mod ul li{
    float: left;
    width: 134px;
    height: 25px;
    overflow: hidden;
}

　　script.js

function $(id){
	return typeof id===\'string\'?document.getElementById(id):id;
}

window.onload=tab;

function tab(){

  var index=0;
  var timer=null;


  var lis=$(\'notice-tit\').getElementsByTagName(\'li\');
  var divs=$(\'notice-con\').getElementsByTagName(\'div\');

  for(var i=0;i<lis.length;i++){
    lis[i].id=i;
    lis[i].onmouseover=function(){
      clearInterval(timer);
      changeOption(this.id);
    }
    lis[i].onmouseout=function(){  
      timer=setInterval(autoPlay,2000);    
    }
  }
  
  if(timer){
    clearInterval(timer);
    timer=null;
  } 
  // ��Ӷ�ʱ�����ı䵱ǰ����������
  timer=setInterval(autoPlay,2000);

  function autoPlay(){
      index++;
      if(index>=lis.length){
         index=0;
      }
      changeOption(index);
  }

  function changeOption(curIndex){
    for(var j=0;j<lis.length;j++){
       lis[j].className=\'\';
       divs[j].style.display=\'none\';
    }

    lis[curIndex].className=\'select\';
    divs[curIndex].style.display=\'block\';
    index=curIndex;
  }
}

　　效果：

2017-09-05 20:45:21

以上是关于如何实现tabs选项卡效果的主要内容，如果未能解决你的问题，请参考以下文章

js实现网页tab选项卡切换效果

easyui选项卡[Tabs]如何实现拖拽功能？

如何实现tabs选项卡效果

Tab选项卡 自动切换效果js实现

Tab选项卡自动切换效果js实现