var lis =document.querySelector('.box').querySelectorAll('li')
var item =document.querySelector('.item').querySelectorAll('li')
for (var i=0;i<lis.length;i++){
lis[i].setAttribute ('index',i) //重点先给每个li添加一个自定义的属性,用来当作item的索引号使用
lis[i].onclick =function(){
//1.table栏的制作
for (var i=0;i<lis.length;i++){
lis[i].className= '' //排他思想做table栏,每当点击新的模块,其他模块的颜色全部默认没有
}
this.className= 'red' //点击以后当前模块的颜色变红
//2.table栏内容交互的制作
var index =this.getAttribute('index') //获取当前元素的自定义属性值
for (var i=0;i<item.length;i++){ //排他思想做table内容栏,每当点击新的模块,其他模块的内容全部隐藏
item[i].style.display = 'none';
}
item[index].style.display = 'block'; //点击当前的table,显示当前的table内容,根据当前的自定义属性得来的
}
table切换栏的制作
最新推荐文章于 2024-01-02 18:58:23 发布