Ringkaskan empat cara untuk melaksanakan tab dinamik dalam js!-tutorial js-php.cn

Ringkaskan empat cara untuk melaksanakan tab dinamik dalam js!

藏色散人

Lepaskan： 2022-08-06 13:52:18

ke hadapan

1798 orang telah melayarinya

Artikel ini akan memberi anda pengenalan terperinci kepada pelbagai kaedah memilih tab secara dinamik dalam JS Saya harap ia akan membantu rakan yang memerlukan!

JS pelbagai kaedah untuk melaksanakan pemilihan tab dinamik

Catatan pertama Menghasilkan HTML dan CSS bukan perkara utama

<!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>

Salin selepas log masuk

[Idea pelaksanaan]

Ikat peristiwa klik pada semua LI mengklik mana-mana li, lakukan langkah kedua
Anda boleh membuat semua kelas LI && p kosong dahulu (xxx.className=''), dan kemudian biarkan LI yang sedang diklik dan p sepadan mempunyai kelas gaya aktif

Berikut ialah bahagian biasa JS untuk mendapatkan elemen

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

Salin selepas log masuk

Pilihan satu

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

Salin selepas log masuk

Pilihan dua:

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

Salin selepas log masuk

Pilihan tiga:

for (let i = 0; i < tabList.length; i++) {
    tabList[i].onclick=function(){
        // 事件绑定：给当前元素的某一个事情绑定一个方法，绑定的时候方法没有执行
        // （属于创建一个方法，当在页面中手动触发点击事件的时候绑定的方法才会执行）
        changeTab(i);
    }
    
}
// 形参变量：当执行这个方法的时候，会把当前点击的这个LI索引传递过来
function changeTab(n) {
    // 1、所有都没有选中样式
    for (let i = 0; i < tabList.length; i++) {
        tabList[i].className=&#39;&#39;;
        pList[i].className =&#39;&#39;;
        
    }
    // 2、当前点击的所有选中样式
    tabList[n].className=&#39;active&#39;;
    pList[n].className = &#39;active&#39;;
}

Salin selepas log masuk

Pilihan 4: (Pelaksanaan JQ)

//当HTML结构都加载完成执行函数
jQuery(function($){    
    //基于JQ内置EACH机制，给每个LI 都绑定了 点击事件
        $(&#39;.tabBox>.header>li&#39;).on(&#39;click&#39;,function(){
            let index = $(this).index();//获取当前点击LI 的索引
            //siblings()  获取兄弟元素
            $(this).addClass(&#39;active&#39;).siblings().removeClass(&#39;active&#39;).parent().nextAll(&#39;p&#39;).eq(index).addClass(&#39;active&#39;).siblings(&#39;p&#39;).removeClass(&#39;active&#39;)
           
        });
});

Salin selepas log masuk

Cadangan berkaitan: [Tutorial video JavaScript]

Atas ialah kandungan terperinci Ringkaskan empat cara untuk melaksanakan tab dinamik dalam js!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!