Tab切换

最新推荐文章于 2020-05-20 16:39:36 发布

qq_42736234

最新推荐文章于 2020-05-20 16:39:36 发布

阅读量327

点赞数 2

分类专栏： js基础案例文章标签： javascript css html5 css3

本文链接：https://blog.csdn.net/qq_42736234/article/details/103780035

版权

js基础案例专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Tab切换：：点击切换、点击延迟切换、自动切换

一布局

<div>
        <ul>
            <li class="active1">1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <ol>
            <li class="active2">1</li>
            <li>2</li>
            <li>3</li>
        </ol>
    </div>

二 css样式

		*{
            margin: 0;
            padding: 0;
        }
        div{
            width: 600px;
            border:5px solid;
            margin: 0 auto;
        }
        ul,li,ol{
            list-style: none;
        }
        ul{
            height: 80px;
            display: flex;
        }
        ul li{
            flex: 1;
            background-color: pink;
            text-align: center;
            line-height: 80px;
            font-size: 50px;
        }
        ol {
            height: 320px;
            position: relative;
        }
        ol li{
            line-height: 320px;
            text-align: center;
            font-size: 100px;
            position: absolute;
            left: 0;
            top: 0;
            width:100%;
            height: 100%;
            background-color: powderblue;
            display: none;
        }
        .active1{
            background-color: salmon;
        }
        .active2{
            display: block;
        }

三 js布局

1. 获取元素

ul > li 都要获取到, 因为每一个 li 都有一个点击事件
ol > li 都要获取到, 因为要操作他们的类名

var ulli=document.querySelectorAll('ul li')
 var olli=document.querySelectorAll('ol li')

2 给每一个 ul 里面的 li 元素添加点击事件(使用循环绑定事件）

for(var i=0;i<ulli.length;i++) {
            ulli[i].onclick=function(){}
        }

3 点击之后产生的效果

让包含自己在内的所有li没有类名
单独给自己添加类名
添加ol下对应索引的类名

//给ul下的li添加点击事件
        for(var i=0;i<ulli.length;i++) {
            //添加属性，使olli可以获得ulli的索引
            ulli[i].setAttribute('index',i)
            ulli[i].onclick=function(){
                //清空所有li类名
                for(var j=0;j<ulli.length;j++) {
                    ulli[j].className=''
                    olli[j].className=''
                }
                //给被点击的li单独加类名
                this.className='active1'
                //给ol下对应li添加类名
                var inli=this.getAttribute('index')
                olli[inli].className='active2'
            }
        }

4 延迟切换

        //获取li
        var ulli = document.querySelectorAll('ul li')
        var olli = document.querySelectorAll('ol li')
for (var i = 0; i < ulli.length; i++) {
            //添加属性，使olli可以获得ulli的索引
            ulli[i].setAttribute('index', i)
                //添加点击事件
            ulli[i].onclick = function() {
                var it = this
                    //如果存在准备执行的计时器，立即清除，解决li划过的延迟bug;
                if (timer) {
                    clearTimeout(timer)
                    timer = null
                }
                //添加setTimeout定时器，使效果在点击0.5s后显现
                var timer = window.setTimeout(function() {
                    for (var j = 0; j < ulli.length; j++) {
                        //清空所有li类名
                        ulli[j].className = ''
                        olli[j].className = ''
                    }
                    //给被点击的li单独加类名
                    it.className = 'active1'
                        //给ol下对应li添加类名
                    var inli = it.getAttribute('index')
                    olli[inli].className = 'active2'
                }, 500)
            }
        }

5 自动切换

 //获取li
 var ulli = document.querySelectorAll('ul li')
        var olli = document.querySelectorAll('ol li')
//添加索引
        var inde = -1
        setInterval(function() {
                //当所有li切换一遍后，把索引清空，重新进行切换
                inde++
                if (inde > 2) {
                    inde = 0
                }
                //进行tab切换
                for (var i = 0, len = ulli.length; i < len; i++) {
                    ulli[i].className = ''
                    olli[i].className = ''
                }
                ulli[inde].className = 'active1'
                olli[inde].className = 'active2'
            }, 1000)

四全部代码

<!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>Tab切换</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            width: 600px;
            border: 5px solid;
            margin: 0 auto;
        }
        
        ul,
        li,
        ol {
            list-style: none;
        }
        
        ul {
            height: 80px;
            display: flex;
        }
        
        ul li {
            flex: 1;
            background-color: pink;
            text-align: center;
            line-height: 80px;
            font-size: 50px;
        }
        
        ol {
            height: 320px;
            position: relative;
        }
        
        ol li {
            line-height: 320px;
            text-align: center;
            font-size: 100px;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: powderblue;
            display: none;
        }
        
        .active1 {
            background-color: salmon;
        }
        
        .active2 {
            display: block;
        }
    </style>
</head>

<body>
    <!-- 布局 -->
    <div>
        <ul>
            <li class="active1">1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <ol>
            <li class="active2">1</li>
            <li>2</li>
            <li>3</li>
        </ol>
    </div>
    <script>
        //获取li
        var ulli = document.querySelectorAll('ul li')
        var olli = document.querySelectorAll('ol li')
            //给ul下的li添加点击事件
        for (var i = 0; i < ulli.length; i++) {
            //添加属性，使olli可以获得ulli的索引
            ulli[i].setAttribute('index', i)
            ulli[i].onclick = function() {
                //清空所有li类名
                for (var j = 0; j < ulli.length; j++) {
                    ulli[j].className = ''
                    olli[j].className = ''
                }
                //给被点击的li单独加类名
                this.className = 'active1'
                    //给ol下对应li添加类名
                var inli = this.getAttribute('index')
                olli[inli].className = 'active2'
            }
        }
        //tab自动切换
        //     //添加索引
        // var inde = -1
        // setInterval(function() {
        //         //当所有li切换一遍后，把索引清空，重新进行切换
        //         inde++
        //         if (inde > 2) {
        //             inde = 0
        //         }
        //         //进行tab切换
        //         for (var i = 0, len = ulli.length; i < len; i++) {
        //             ulli[i].className = ''
        //             olli[i].className = ''
        //         }
        //         ulli[inde].className = 'active1'
        //         olli[inde].className = 'active2'
        //     }, 1000)
        //延迟切换
        // for (var i = 0; i < ulli.length; i++) {
        //     //添加属性，使olli可以获得ulli的索引
        //     ulli[i].setAttribute('index', i)
        //         //添加点击事件
        //     ulli[i].onclick = function() {
        //         var it = this
        //             //如果存在准备执行的计时器，立即清除，解决li划过的延迟bug;
        //         if (timer) {
        //             clearTimeout(timer)
        //             timer = null
        //         }
        //         //添加setTimeout定时器，使效果在点击0.5s后显现
        //         var timer = window.setTimeout(function() {
        //             for (var j = 0; j < ulli.length; j++) {
        //                 //清空所有li类名
        //                 ulli[j].className = ''
        //                 olli[j].className = ''
        //             }
        //             //给被点击的li单独加类名
        //             it.className = 'active1'
        //                 //给ol下对应li添加类名
        //             var inli = it.getAttribute('index')
        //             olli[inli].className = 'active2'
        //         }, 500)
        //     }
        // }
    </script>
</body>

</html>

qq_42736234

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Tab切换

js实现Tab切换（选项卡）Tab切换：点击或者鼠标划过时不同导航栏时，下面内容自动切换一布局<div> <ul> <li class="active1">1</li> <li>2</li> <li>3</li&g...
复制链接

扫一扫