Rumah > Artikel > hujung hadapan web > Ringkaskan empat cara untuk melaksanakan tab dinamik dalam js!
Ringkaskan empat cara untuk melaksanakan tab dinamik dalam js!
- 藏色散人ke hadapan
- 2022-08-06 13:52:181759semak imbas
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>[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('tabBox'),
oList = oBox.getElementsByTagName('li'),
op = oBox.getElementsByTagName('p');
Pilihan satu
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 } }
Pilihan dua:
//=>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 = ''
}
}
}
Pilihan tiga:
for (let i = 0; i 9abb62b3c4142a001d12945017796e46.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')
});
});
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!