Résumez quatre façons d'implémenter des onglets dynamiques dans js !-js tutoriel-php.cn

Résumez quatre façons d'implémenter des onglets dynamiques dans js !

藏色散人

Libérer： 2022-08-06 13:52:18

avant

1798 Les gens l'ont consulté

Cet article vous donnera une introduction détaillée aux différentes méthodes de sélection dynamique des onglets dans JS. J'espère qu'il sera utile aux amis dans le besoin !

JS plusieurs méthodes pour implémenter la sélection dynamique des onglets

Premier post HTML et CSS, ce n'est pas le but

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

Copier après la connexion

[Idées d'implémentation]

B et tout LI Déterminez l'événement de clic. Lorsque vous cliquez sur un li, effectuez la deuxième étape. Vous pouvez d'abord rendre toutes les classes de LI && p vides (xxx.className=''), puis faire en sorte que celle actuellement cliquée et le p correspondant aient le classe de style actif
Ce qui suit est la partie commune de JS pour obtenir des éléments

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

Copier après la connexion

Option un

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

Copier après la connexion

Option deux:

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

Copier après la connexion

Option trois:

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

Copier après la connexion

Option 4 : (Implémentation 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;)
           
        });
});

Copier après la connexion

Recommandations associées : [Tutoriel vidéo JavaScript]

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!