点击title
title,li,box，都增加选中类名on
列表只有一个选中效果，其他不受影响
<ul class="list">
<li class="on">
<h4 class="title on">11</h4>
<div class="box on">11</div>
<li>
<li>
<h4 class="title">22</h4>
<div class="box">22</div>
<li>
<li>
<h4 class="title">33</h4>
<div class="box">33</div>
<li>
</ul>
分享
关注
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
li {
list-style-type: none;
}
.on {
color: red;
}
</style>
</head>
<body>
<ul class="list">
<li class="on">
<h4 class="title on">11</h4>
<div class="box on">11</div>
</li>
<li>
<h4 class="title">22</h4>
<div class="box">22</div>
</li>
<li>
<h4 class="title">33</h4>
<div class="box">33</div>
</li>
</ul>
</body>
<script>
document.querySelectorAll(".title").forEach((item) => {
item.onclick = function () {
document.querySelectorAll(".on").forEach((e) => {
e.classList.remove("on");
});
item.parentNode.classList.add("on");
item.classList.add("on");
item.parentNode.querySelector(".box").classList.add("on");
};
});
</script>
</html>
分享
已结题
（查看结题原因） 7月14日
已采纳回答
7月14日
创建了问题
7月13日
