自动轮播切换tab

原文链接:https://segmentfault.com/a/1190000013471034

一个项目中需要用到类似的功能,自己手写一个轮播切换,不足之处见谅。代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .navUl{
            border: 1px solid #ddd;
            overflow: hidden;   
        }
        .navUl li{
            list-style: none;
            float: left;
            width: auto;
            height: 30px;
            line-height: 30px;
            padding: 0 10px;
            cursor: pointer;
        }
        .navUl li.activeLi{
            background: rgb(155, 155, 247);
            color: #fff;
        }
    </style>
</head>
<body>
    <ul class="navUl js-navUl">
        <li class="activeLi">tab1</li>
        <li>tab2</li>
        <li>tab3</li>
        <li>tab4</li>
        <li>tab5</li>
    </ul>
    <div>
        <div id="tabCon0">
                tab0内容
        </div>
        <div id="tabCon1" style="display:none">
                tab1内容
        </div>
        <div id="tabCon2" style="display:none">
                tab2内容
        </div>
        <div id="tabCon3" style="display:none">
                tab3内容
        </div>
        <div id="tabCon4" style="display:none">
                tab4内容
        </div>
    </div>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script>
        window.onload=function(){
            var autoTab = setInterval( changeTab,2000);
            $('.js-navUl').hover(
            function () {
                clearInterval(autoTab);
            }, 
            function () {
                autoTab = setInterval( changeTab,2000);
            });
            var tabIndex=0;
            function changeTab(){
                $(".js-navUl li").eq(tabIndex).addClass("activeLi").siblings().removeClass("activeLi");
                if($("#tabCon"+tabIndex)){
                    $("#tabCon"+tabIndex).show().siblings().hide();            
                }
                tabIndex++;
                if(tabIndex==5){
                    tabIndex=0;
                }
            }
            $(".js-navUl li").on("click",function(){
                var ind=$(this).index();
                if($("#tabCon"+ind)){
                    $("#tabCon"+ind).show().siblings().hide();            
                }
                if(ind!=4){
                    tabIndex=ind+1;            
                }else{
                    tabIndex=0;
                }
                $(this).addClass("activeLi").siblings().removeClass("activeLi");
            });
        }
    </script>
</body>
</html>

样式什么的自己修改即可

展开阅读全文

js tab 切换问题

10-31

用JS 写的TAB选项卡想过 tab1 tab2 tab3rntab2 中放一button 按钮 当点击按钮后 又重新回到了 tab1页面上了rn现在想 点击按钮后 还是在tab2页面上rnrn下面是JS代码 应该怎么该[code=JScript]rnopCard = function()rnrnthis.bind = new Array();rnthis.index = 0; //默认显示哪个选项卡,从0开始rnthis.style = new Array(); //["","",""]rnthis.overStyle = false; //选项是否有over, out变换样式事件,样式为this.style[2]rnthis.overChange = false; //内容是否用over, out直接激活rnthis.menu = false; //菜单类型rnthis.nesting = [false,false,"",""]; //是否嵌套,后面2个参数是指定menu,info的子集深度所用idrnthis.auto = [false, 1000]; //自动滚动[true,2000]rnthis.timerID = null; //自动播放的rnthis.menutimerID = null; //菜单延时的rnthis.creat = function(func)rnrnvar _arrMenu = document.getElementById(this.bind[0]).getElementsByTagName(this.bind[1]);rnvar _arrInfo = document.getElementById(this.bind[2]).getElementsByTagName(this.bind[3]);rnvar my = this, i;rnvar argLen = arguments.length;rnvar arrM = new Array();rnif(this.nesting[0] || this.nesting[1]) // 有选项卡嵌套rn // 过滤出需要的数据rnvar arrMenu = this.nesting[0]?getChilds(_arrMenu,this.bind[0],2):_arrMenu;rnvar arrInfo = this.nesting[1]?getChilds(_arrInfo,this.bind[2],3):_arrInfo;rnrnelsernrnvar arrMenu = _arrMenu;rnvar arrInfo = _arrInfo;rnrnvar l = arrMenu.length;rnif(l!=arrInfo.length)alert("菜单和内容必须拥有相同的数量\n如果需要,你可以放一个空的在那占位。")rn// 修正rnif(this.menu)this.auto=false;this.overChange=true; //如果是菜单,则没有自动运行,有over, out直接激活rn// 循环添加各个事件等rnfor(i=0;i 论坛

没有更多推荐了,返回首页