Summarize four ways to implement dynamic tabs in js!-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Summarize four ways to implement dynamic tabs in js!

藏色散人

Aug 06, 2022 pm 01:52 PM

javascript

This article will give you a detailed introduction to various methods of dynamically selecting tabs in JS. I hope it will be helpful to friends in need!

JS multiple methods to implement dynamic selection of tabs

First post Producing HTML and CSS is not the point

<!DOCTYPE html>
<html>
<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>
    <link rel="stylesheet" href="css/reset.min.css">
    <style>
        .tabBox{
            margin: 20px  auto;
            width: 500px;
        }
        .tabBox ul{
            position: relative;
            top: 1px;
        }
        .tabBox ul li{
            display: inline-block;
            padding: 0 5px;
            margin-right:10px;
            line-height: 33px;
            border: 1px solid #aaa; 
            cursor: pointer;
        }
        .tabBox ul li.active{
            border-bottom-color:#fff; 
            /* 当前LI的边框覆盖着DIV的边框，
            我们让LI的下边框是背景颜色白色，这样看上去就像没边框了 */
            font-weight: bold;
            color: lightcoral;
        }
        .tabBox div{
            display: none;
            line-height: 148px;
            text-align: center;
            border: 1px solid #aaa; 
        }
        .tabBox div.active{
            display: block;
        }        
    </style>
</head>
<body>
    <div id="tabBox">
        <ul>
            <li>新闻</li>
            <li>电影</li>
            <li>音乐</li>
        </ul>  
        <div>嘟嘟</div>
        <div>滴滴</div>
        <div>嘟嘟滴滴</div> 
    </div>   
    <script src="js/tab_zy.js"></script>           
</body>
</html>

[Implementation ideas]

Bind click events to all LI, when clicked For any li, do the second step
You can first make all the classes of LI && p empty (xxx.className=''), and then let the current click This LI and the corresponding p have the active style class

The following is the common part of JS to obtain elements

var oBox = document.getElementById('tabBox'),
    oList = oBox.getElementsByTagName('li'),
    op = oBox.getElementsByTagName('p');

Plan One

var LastIndex = 0 //记录上次所选的LI 选中的索引
for(var i=0;i<olist.length olist if>如果当前点击的索引和上一次索引相同（点击的就是上一个被选中的），我们不做任何事情
		oList[LastIndex].className = op[LastIndex].className = ''	//=>清空上一次
		oList[this.CurIndex].className=op[this.CurIndex].className = 'active'
		//=>修改LAST-INDEX值，让当前本选中的索引作为下一次点击要清除的上一次的索引
		LastIndex  = this.CurIndex
	}
}</olist.length>

Plan Two:

//=>1.传递对象
for(var i = 0; i<olist.length olist changetab function for>如果当前循环的LI和传递进来点击的那个元素相同，说明当前循环的这个LI就是被点击的，让其有选中样式
		if(oList[j]===n){
			oList[j].className= op[j].className = 'active'
		}else{
		//=>不相等，则不是被点击的，我们取消选中样式即可
			oList[j].className= op[j].className = ''
		}
	}
}</olist.length>

Plan Three:

for (let i = 0; i <p><strong> Plan Four: (JQ implementation) </strong></p><pre class="brush:php;toolbar:false">//当HTML结构都加载完成执行函数
jQuery(function($){    
    //基于JQ内置EACH机制，给每个LI 都绑定了 点击事件
        $('.tabBox>.header>li').on('click',function(){
            let index = $(this).index();//获取当前点击LI 的索引
            //siblings()  获取兄弟元素
            $(this).addClass('active').siblings().removeClass('active').parent().nextAll('p').eq(index).addClass('active').siblings('p').removeClass('active')
           
        });
});

Related recommendations: [JavaScript video tutorial]

The above is the detailed content of Summarize four ways to implement dynamic tabs in js!. For more information, please follow other related articles on the PHP Chinese website!

Statement

This article is reproduced at:csdn. If there is any infringement, please contact admin@php.cn delete