刚开始打算用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>
如果觉得《js tab栏（导航栏）点击切换样式效果和内容改变》对你有帮助，请点赞、收藏，并留下你的观点哦！
