js点击选中效果，其他行不影响
点击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>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.on {
background-color: #f00
}
.title {
color: #ff0
}
.box {
color: #0f0;
}
</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>
<script>
let oul = document.getElementsByClassName('list')[0];
let liList = oul.getElementsByTagName('li');
let H4List = oul.getElementsByClassName('title');
let boxList = oul.getElementsByClassName('box');
for (let i = 0; i < liList.length; i++) {
liList[i].onclick = function () {
for (let j = 0; j < liList.length; j++) {
liList[j].className = "";
H4List[j].className = "title";
boxList[j].className = "box";
}
liList[i].className = "on";
H4List[i].className = "title on";
boxList[i].className = "box on";
}
}
</script>
</body>
</html>
$(".navItem").click(function(event) {
$(this).siblings().removeClass('on'); //去除兄弟节点on样式
$(this).siblings().find("*").removeClass('on'); //去除兄弟节点 所有子节点 on样式
$(this).addClass('on');
$(this).find("*").addClass('on');
});
你的意思是点击哪个哪个就变色吗？如果是的话，可以为ul绑定一个点击事件，然后使用事件委托，判断正在点击的li是哪一个，然后改变它的样式，其他的不会收到印象。
意思是列表中只有一个带on，其它都不带？
在li上加事件，点击时把同辈的元素都去掉on类，然后再给当前元素加上on类。
如果没有特别的需求，下级元素h4/div可以不用增减on的类，会继承上级样式属性。
下面的li层你并没有给到on
<ul class="list">
<li class="on">
<h4 class="title on">11</h4>
<div class="box on">11</div>
<li>
<li class="on">
<h4 class="title">22</h4>
<div class="box">22</div>
<li>
<li class="on">
<h4 class="title">33</h4>
<div class="box">33</div>
<li>
</ul>
你的意思是类名相同，都为on的时候，点击哪个的时候选中哪个吗？
我感觉你的意思是，给li加class名，改变其对应样式吧！这样的话，就不需要里面也加“”on“”，用css就好，你看
<style>
.on{background: red;}
.on .box{color: blue;}
.on .title{color: pink;}
</style>
你看，然后再用js去给li标签加‘’on‘就行’，原生js挺麻烦的，还不如用jquery.js
//原生js
var list = document.querySelector('.list');
var _child =list.querySelectorAll('li');
for (let i = 0; i < _child.length; i++) {
_child[i].onclick=function(){
for (let j = 0; j < _child.length; j++) {
_child[j].classList.remove('on');
}
_child[i].classList.add('on');
}
}
//jquery
$(".list li").click(function(){
$(this).addClass("on").siblings().removeClass('on');
})
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.on {
background-color: #f00
}
.title {
color: #ff0
}
.box {
color: #0f0;
}
</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>
<script>
let oul = document.getElementsByClassName('list')[0];
let liList = oul.getElementsByTagName('li');
let H4List = oul.getElementsByClassName('title');
let boxList = oul.getElementsByClassName('box');
for (let i = 0; i < liList.length; i++) {
liList[i].onclick = function () {
for (let j = 0; j < liList.length; j++) {
liList[j].className = "";
H4List[j].className = "title";
boxList[j].className = "box";
}
liList[i].className = "on";
H4List[i].className = "title on";
boxList[i].className = "box on";
}
}
</script>
</body>
</html>
是需要列表中只有一个li带on，可以点击时先把所以的元素都去掉on，然后再给当前元素加上on类。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.on {
border: 3px solid #f00;
}
</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>
<script>
document.querySelectorAll(".list .title").forEach(function(t, i){
t.addEventListener("click", function (e) {
document.querySelectorAll(".list li, .list .title,.list .box").forEach(function(t2){
t2.classList.remove('on'); //
});
this.classList.add('on');
this.parentNode.classList.add('on');
this.parentNode.querySelector(".box").classList.add('on');
}, false);
});
</script>
</body>
</html>