Fassen Sie vier Möglichkeiten zur Implementierung dynamischer Tabs in js zusammen!-js-Tutorial-php.cn

Fassen Sie vier Möglichkeiten zur Implementierung dynamischer Tabs in js zusammen!

藏色散人

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

nach vorne

1798 Leute haben es durchsucht

Dieser Artikel gibt Ihnen eine detaillierte Einführung in verschiedene Methoden zur dynamischen Auswahl von Tabs in JS. Ich hoffe, dass er Freunden in Not hilfreich sein wird! 🎭 Binde alle LI Bestimmen Sie das Klickereignis. Führen Sie den zweiten Schritt aus. Sie können zuerst alle Klassen von LI && p leer machen (xxx.className='') und dann das aktuell angeklickte LI und das entsprechende p haben aktive Stilklasse

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

Nach dem Login kopieren

Option eins

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

Nach dem Login kopieren

Option zwei:

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

Nach dem Login kopieren

Option drei:

//=>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;
		}
	}
}

Nach dem Login kopieren

Option 4: (JQ-Implementierung)

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;;
}

Nach dem Login kopieren

Verwandte Empfehlungen: [

JavaScript-Video-Tutorial
]

Das obige ist der detaillierte Inhalt vonFassen Sie vier Möglichkeiten zur Implementierung dynamischer Tabs in js zusammen!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!