Maison > Article > interface Web > Résumez quatre façons d'implémenter des onglets dynamiques dans js !

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

藏色散人avant: 2022-08-06 13:52:181755parcourir

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>

[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('tabBox'),
    oList = oBox.getElementsByTagName('li'),
    op = oBox.getElementsByTagName('p');

Option un

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

Option deux:

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

Option trois:

for (let i = 0; i 7cdce8716b9dacdf242d79c38129bdf7.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')
           
        });
});

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!

JavaScript css html class JS 事件 li

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Explication détaillée des fonctions JavaScript de sélection de tout et d'inversion de la sélection (avec des exemples de code)Article suivant：Explication détaillée des fonctions JavaScript de sélection de tout et d'inversion de la sélection (avec des exemples de code)

Articles Liés

Voir plus