刚开始打算用css效果解决 结果发现鼠标点击之后样式就没了
<div class="tab_list">
<ul>
<li class="current">头部1</li>
<li>头部2</li>
</ul>
</div>
<div class="item" style="display: block;">内容1</div>
<div class="item">内容2</div>
<style>
.tab_list {
height: 40px;
display: flex;
justify-content: center;
padding-bottom: 30px;
}
.tab_list li {
align-items: center;
border: 0 none;
border-radius: 16px;
cursor: pointer;
display: inline-flex;
font-family: inherit;
font-size: 16px;
font-weight: 600;
justify-content: center;
letter-spacing: .03em;
line-height: 1;
opacity: 1;
outline: 0 none currentcolor;
transition: background-color .2s ease 0s, opacity .2s ease 0s;
height: 32px;
padding: 0 16px;
color: rgb(101, 8, 124);
}
.tab_list .current {
box-shadow: inset 0 -1px 0 0 rgba(35, 35, 78, 0.4);
background-color: #9238a1;
color: #da2fa6;
border-radius: 20px;
}
.item_info {
padding: 20px 0 0 20px;
}
.item {
display: none; // 重点
}
</style>
<scrip>
// 获取元素
var lis = document.querySelectorAll('.tab_list li');
var items = document.querySelectorAll('.item');
// for循环绑定点击事件
for (var i = 0; i < lis.length; i++) {
// 开始给5个小li 设置索引号
lis[i].setAttribute('index', i);
lis[i].onclick = function() {
// 1. 上的模块选项卡,点击某一个,当前这一个底色会是红色,其余不变(排他思想) 修改类名的方式
// 干掉所有人 其余的li清除 class 这个类
for (var i = 0; i < lis.length; i++) {
lis[i].className = '';
}
// 留下我自己
this.className = 'current';
// 2. 下面的显示内容模块
var index = this.getAttribute('index');
console.log(index);
// 干掉所有人 让其余的item 这些div 隐藏
for (var i = 0; i < items.length; i++) {
items[i].style.display = 'none';
}
// 留下我自己 让对应的item 显示出来
items[index].style.display = 'block';
}
}
</script>