老师你好，在做这个tab栏的时候，有一部分逻辑一直实现不了：
我想实现的是，当点击“规则”时显示其对应的内容，并且当鼠标移到“规则”对应的内容上时，“规则”的背景颜色为淘宝红，那么当点击“论坛”时，前面的“规则”所对应的背景颜色应该恢复为默认颜色，而不是淘宝红，就这里一直实现不了这个逻辑，想请老师指点一下：
源码：
reset.css
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
index.css
a {
text-decoration: none;
color: #000;
}
body {
margin: 80px;
}
.tab {
border: 1px solid #ddd;
width: 498px;
height: 130px;
}
/* 头部区域 */
.tab_header {
height: 38px;
background-color: #253e3e;
position: relative;
color: #fff;
font-weight: 700;
}
.tab_header ul {
width: 501px;
position: absolute;
/* 设置竖线合并 */
left: -1;
}
.tab_header ul li {
float: left;
width: 98px;
height: 38px;
line-height: 38px;
text-align: center;
padding: 0px 1px;
}
.tab_header ul li:hover {
cursor: pointer;
/* background-color: #f40; */
transition: all .3s;
}
/* 内容区域 */
.tab_body ul {
margin-top: 10px;
}
.tab_body ul li {
float: left;
width: 220px;
margin: 10px;
}
.tab_body ul li a:hover {
color: red;
}
.tab_body .dom {
display: none;
}
index.html
<div class="tab">
<!--头部-->
<div class="tab_header">
<ul>
<li>公告</li>
<li>规则</li>
<li>论坛</li>
<li>安全</li>
<li>公益</li>
</ul>
</div>
<!--身体部分-->
<div class="tab_body">
<div class="dom" style="display: block;">
<ul>
<li>
<a href="javascript;">数据七夕：金牛爱送玫瑰</a>
</li>
<li>
<a href="javascript;">阿里打造“互联网监管”</a>
</li>
<li>
<a href="javascript;">10万家店60万新品</a>
</li>
<li>
<a href="javascript;">全球最大网上时装周</a>
</li>
</ul>
</div>
<div class="dom">
<ul>
<li>
<a href="javascript;">“全额返现”要管控啦</a>
</li>
<li>
<a href="javascript;">淘宝新规发布汇总（7月）</a>
</li>
<li>
<a href="javascript;">炒信规则调整意见反馈</a>
</li>
<li>
<a href="javascript;">质量相关规则近期变更</a>
</li>
</ul>
</div>
<div class="dom">
<ul>
<li>
<a href="javascript;">阿里建商家全链路服务</a>
</li>
<li>
<a href="javascript;">个性化消费时代来临</a>
</li>
<li>
<a href="javascript;">跨境贸易是中小企业机</a>
</li>
<li>
<a href="javascript;">美妆行业虚假信息管控</a>
</li>
</ul>
</div>
<div class="dom">
<ul>
<li>
<a href="javascript;">接次文件，毁了一家店</a>
</li>
<li>
<a href="javascript;">账号安全神器</a>
</li>
<li>
<a href="javascript;">最新版微信上线</a>
</li>
<li>
<a href="javascript;">信用卡中的小套路</a>
</li>
</ul>
</div>
<div class="dom">
<ul>
<li>
<a href="#">公益图书--我们来啦</a>
</li>
</ul>
</div>
</div>
</div>
index.js
// 获取元素 -- 利用事件委托
const lis = document.querySelectorAll('.tab_header li');
const content = document.querySelectorAll(".tab_body .dom");
for (let i = 0; i < lis.length; i++) {
lis[i].addEventListener('click', onClick(i));
function onClick(i) {
return () => {
for (let j = 0; j < content.length; j++) {
content[j].style.display = 'none';
// lis[j].style.backgroundColor = '#253e3e';
// lis[j].style.color = '#fff';
}
content[i].style.display = 'block';
lis[i].style.backgroundColor = '#f40';
}
}
}
京公网安备 11011402011233号