JQUERY的TAB标签，我想实现5秒钟自动切换的效果，怎么做

Posted 2023-04-16

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQUERY的TAB标签，我想实现5秒钟自动切换的效果，怎么做相关的知识，希望对你有一定的参考价值。

代码太多，已放到网盘。想5秒钟切换到下一个栏目，这样循环。
http://pan.baidu.com/s/1kT42uk3

下面这段代码替换你原来的js代码，亲测可用……
原理：
1.设置了一个定时器，每2秒触发。
2.如果用户自己切换，停止定时器。当用户鼠标离开区域时，再次进入定时切换。
不懂再问~

$(function()
var i=0;//初始记录用户鼠标经过是第几个li
var canmove=true;
$('.menu li').mouseenter(function()
canmove=false;
clearInterval(li_timer);
i=$(this).index();
$(this).addClass('off').siblings().removeClass('off');
$('.menudiv div').hide();
$('.menudiv div').eq(i).show();
);

$("#tab1").mouseenter(function()//只要用户鼠标在这个tab1区域内，就不自动跳转
canmove=false;
).mouseleave(function()
clearInterval(li_timer);
setTimeout(function()canmove=true;,2000);//两秒后自动切换
);

function li_timer()
if(canmove)
i++;
if(i==$('.menu li').length)
i=0;

$('.menu li').eq(i).addClass('off').siblings().removeClass('off');
$('.menudiv div').hide();
$('.menudiv div').eq(i).show();

setInterval(li_timer,2000);//每两秒切换
);

参考技术A <script>
var index = 0;
$(function()
var timer = setInterval(rotate,2000);
$('.menu li').mouseover(function()
clearInterval(timer);
$(this).addClass('off').siblings().removeClass('off');
$('.menudiv div').hide();
$('.menudiv div').eq($(this).index()).show();
);
$('.menu li').mouseout(function()
timer = setInterval(rotate,2000);
);
);
function rotate()

var lis = $(".menu li");
$(lis[index]).addClass('off').siblings().removeClass('off');
$('.menudiv div').hide();
$('.menudiv div').eq(index).show();
if(++index == lis.length)
index =0;

</script>
实现了，但是代码写的不好参考技术B 设置一个定时器, 每5秒钟执行一次你的tab切换事件..追问

我初学，就是这个不知道，才问的。能写下简单的代码吗，谢谢

参考技术C var a = 1;
alert(a);

标签页（tab）切换的原生js,jquery和bootstrap实现

概述

这是我在学习课程Tab选项卡切换效果时做的总结和练手。

原课程中只有原生js实现，jquery和bootstrap实现是我自己补上的。

本节内容

标签页（tab）切换的原生js实现
标签页（tab）切换的jquery实现
标签页（tab）切换的bootstrap实现

标签页（tab）切换的原生`js`实现

技术分享图片

说明：

代码是我自己写的，与课程中的不一样。
主要利用display:none来把部分内容隐藏而显示其它内容。
遇到了事件的循环绑定，我是利用添加id使其成为钩子来解决的。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tab切换</title>
    <style type="text/css">
        *{
            font-family: Times;
        }

        #main {
            font-size: 13px;
            height: 100px;
            width: 300px;
            border: 1px solid #c0c0c0;
        }

        #top_column {
            height: 30px;
            width: 300px;           
        }

        #top_column div {
            height: 30px;
            width: 75px;    
            background-color: #fffff0;  
            text-align: center; 
            line-height: 30px;  
            border: 1px solid #c0c0c0;
            margin: -1px -1px 0px -1px; 
        }

        #top_column div:hover { 
            background-color: #fff; 
            font-weight:bold;
            color: orange;      
        }   

        .top_column_hover { 
            background-color: #fff; 
            font-weight:bold;
            color: orange;      
        }           

        #bottom_column {
            height: 70px;
            width: 300px;       
        }
        
        #bottom_column a {
            height: 35px;
            width: 140px;
            display: block;
            text-align: left;   
            text-decoration: none;
            outline: none;
            color: black;
            line-height: 35px;  
            padding-left: 10px; 
            float: left;    
        }

        #bottom_column a:hover {
            color: orange;      
        }

        #main div {
            float: left;
        }



    </style>
</head>
<body>
    <div id="main">
        <div id="top_column">
            <div class="column_notice">公告</div>
            <div class="column_rule">规则</div>
            <div class="column_forum">论坛</div>
            <div class="column_security">安全</div>
        </div>
        <div id="bottom_column">
            <div class="content_notice" style="display:block">
                <a href="#" class="notice1">颠覆式创新</a>
                <a href="#" class="notice2">旗舰来了</a>
                <a href="#" class="notice3">全国首测</a>
                <a href="#" class="notice4">千年一遇</a>
            </div>
            <div class="content_rule" style="display:none">
                <a href="#" class="rule1">司机高速</a>
                <a href="#" class="rule2">北欧村名</a>
                <a href="#" class="rule3">高校老师</a>
                <a href="#" class="rule4">公安工作组</a>
            </div>
            <div class="content_forum" style="display:none">
                <a href="#" class="forum1">百度贴吧</a>
                <a href="#" class="forum2">哈尔滨</a>
                <a href="#" class="forum3">麦当劳</a>
                <a href="#" class="forum4">光头哥</a>
            </div>
            <div class="content_security" style="display:none">
                <a href="#" class="security1">经纪人</a>
                <a href="#" class="security2">以上处于</a>
                <a href="#" class="security3">国足领队</a>
                <a href="#" class="security4">国务院</a>
            </div>
        </div>
    </div>

    <script type="text/javascript">

        window.onload=tab;

        function tab(){
            var top_column=document.getElementById("top_column").getElementsByTagName("div");
            var bottom_column=document.getElementById("bottom_column").getElementsByTagName("div");

            for(var i=0;i<top_column.length;i++){
                top_column[i].id=i;
                top_column[i].onmouseover=function(){
                    tab_content(this.id);
                }
            }

            function tab_content(i){

                for(var j=0;j<top_column.length;j++){
                        top_column[j].className="top_column_not_hover";
                        bottom_column[j].style.display="none";
                }

                top_column[i].className="top_column_hover";
                bottom_column[i].style.display="block";
            }
        }
    </script>
</body>
</html>

标签页（tab）切换的`jquery`实现

技术分享图片

说明：

效果其实和原生js实现是一样的。
因为我想写一下jquery代码练练手，所以只是把原生js实现中的js代码改成了jquery的形式。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tab切换</title>
    <style type="text/css">
        *{
            font-family: Times;
        }

        #main {
            font-size: 13px;
            height: 100px;
            width: 300px;
            border: 1px solid #c0c0c0;
        }

        #top_column {
            height: 30px;
            width: 300px;           
        }

        #top_column div {
            height: 30px;
            width: 75px;    
            background-color: #fffff0;  
            text-align: center; 
            line-height: 30px;  
            border: 1px solid #c0c0c0;
            margin: -1px -1px 0px -1px; 
        }

        #top_column div:hover { 
            background-color: #fff; 
            font-weight:bold;
            color: orange;      
        }   

        .top_column_hover { 
            background-color: #fff; 
            font-weight:bold;
            color: orange;      
        }           

        #bottom_column {
            height: 70px;
            width: 300px;       
        }
        
        #bottom_column a {
            height: 35px;
            width: 140px;
            display: block;
            text-align: left;   
            text-decoration: none;
            outline: none;
            color: black;
            line-height: 35px;  
            padding-left: 10px; 
            float: left;    
        }

        #bottom_column a:hover {
            color: orange;      
        }

        #main div {
            float: left;
        }



    </style>
</head>
<body>
    <div id="main">
        <div id="top_column">
            <div class="column_notice">公告</div>
            <div class="column_rule">规则</div>
            <div class="column_forum">论坛</div>
            <div class="column_security">安全</div>
        </div>
        <div id="bottom_column">
            <div class="content_notice" style="display:block">
                <a href="#" class="notice1">颠覆式创新</a>
                <a href="#" class="notice2">旗舰来了</a>
                <a href="#" class="notice3">全国首测</a>
                <a href="#" class="notice4">千年一遇</a>
            </div>
            <div class="content_rule" style="display:none">
                <a href="#" class="rule1">司机高速</a>
                <a href="#" class="rule2">北欧村名</a>
                <a href="#" class="rule3">高校老师</a>
                <a href="#" class="rule4">公安工作组</a>
            </div>
            <div class="content_forum" style="display:none">
                <a href="#" class="forum1">百度贴吧</a>
                <a href="#" class="forum2">哈尔滨</a>
                <a href="#" class="forum3">麦当劳</a>
                <a href="#" class="forum4">光头哥</a>
            </div>
            <div class="content_security" style="display:none">
                <a href="#" class="security1">经纪人</a>
                <a href="#" class="security2">以上处于</a>
                <a href="#" class="security3">国足领队</a>
                <a href="#" class="security4">国务院</a>
            </div>
        </div>
    </div>

    <script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript">

    $(window).load(function(){
        var $top_column=$("#top_column div");
        var $bottom_column=$("#bottom_column div");

        $.each($top_column,function(i,item){
            $(item).hover(tab_content);
        })

        function tab_content(){
            $.each($top_column,function(i,item){
                $(item).attr("class", "top_column_not_hover");
            })

            $.each($bottom_column,function(i,item){
                $(item).hide();
            })

            var index=$top_column.index($(this));
            $bottom_column.eq(index).show();
            $top_column.eq(index).attr("class", "top_column_hover");
        }
    })
    </script>
</body>
</html>

标签页（tab）切换的`bootstrap`实现

技术分享图片

说明：

代码中不需要额外写js，只需引用jquery和bootstrap文件即可。
虽然不需要写js，但是缺点是需要点击，并且鼠标离开后回复原状，解决这些问题的话需要写js。
虽然bootstrap看起来很华丽，而且很简便。但是在一些小改动上面很麻烦，而且会踩很多坑。所以如果需要细致并且频繁修改网站的话，不建议用bootstrap搭建网站。
踩坑记录：box-sizing 属性的content-box和border-box（其实这也是盒模型的基本）。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tab切换</title>
    <style type="text/css">
        *{
            font-family: Times;
        }

        #main {
            font-size: 13px;
            height: 100px;
            width: 300px;
            border: 1px solid #c0c0c0;
            margin:10px 10px;
            box-sizing: content-box; 
        }

        #myTab {
            height: 30px;
            width: 300px;           
        }

        #myTab div {
            height: 30px;
            width: 75px;    
            background-color: #fffff0;  
            text-align: center; 
            line-height: 30px;  
            border: 1px solid #c0c0c0;
            margin: -1px -1px 0px -1px;
            box-sizing: content-box; 
        }

        #myTab div:hover {  
            background-color: #fff; 
            font-weight:bold;
            color: orange;  
            cursor: pointer;    
        }               

        #myTabContent {
            height: 70px;
            width: 300px;       
        }
        
        #myTabContent a {
            height: 35px;
            width: 140px;
            display: block;
            text-align: left;   
            text-decoration: none;
            outline: none;
            color: black;
            line-height: 35px;  
            padding-left: 10px; 
            float: left;    
        }

        #myTabContent a:hover {
            color: orange;      
        }

        #main div {
            float: left;
        }


    </style>
</head>
<body>
    <div id="main">
        <div id="myTab" class="nav nav-tabs">
            <div href="#notice" data-toggle="tab">公告</div>
            <div href="#rule" data-toggle="tab">规则</div>
            <div href="#forum" data-toggle="tab">论坛</div>
            <div href="#security" data-toggle="tab">安全</div>
        </div>
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade in active" id="notice">
                <a href="#" class="notice1">颠覆式创新</a>
                <a href="#" class="notice2">旗舰来了</a>
                <a href="#" class="notice3">全国首测</a>
                <a href="#" class="notice4">千年一遇</a>
            </div>
            <div class="tab-pane fade" id="rule">
                <a href="#" class="rule1">司机高速</a>
                <a href="#" class="rule2">北欧村名</a>
                <a href="#" class="rule3">高校老师</a>
                <a href="#" class="rule4">公安工作组</a>
            </div>
            <div class="tab-pane fade" id="forum">
                <a href="#" class="forum1">百度贴吧</a>
                <a href="#" class="forum2">哈尔滨</a>
                <a href="#" class="forum3">麦当劳</a>
                <a href="#" class="forum4">光头哥</a>
            </div>
            <div class="tab-pane fade" id="security">
                <a href="#" class="security1">经纪人</a>
                <a href="#" class="security2">以上处于</a>
                <a href="#" class="security3">国足领队</a>
                <a href="#" class="security4">国务院</a>
            </div>
        </div>
    </div>

    <script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
    <link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
    <script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>

    <script type="text/javascript">

    </script>
</body>
</html>

以上是关于JQUERY的TAB标签，我想实现5秒钟自动切换的效果，怎么做的主要内容，如果未能解决你的问题，请参考以下文章

如何使LayUI的Tab选项卡标签在切换时，自动刷新

jQuery怎么实现tab页切换效果

简单实现tab标签页切换

网页中tab标签切换分别用jquery和javascript源码实现

html+css+jQuery+JavaScript实现tab自动切换功能

Jquery tab 选项卡无刷新切换