<p class="item active">11</p>
<p class="item">22</p>
<p class="item">33</p>
<p class="item">44</p>
<p class="item">55</p>
<p class="item">66</p>
</div>
<script type="text/javascript">
var _item = document.getElementsByClassName('item')
for (var i = 0; i < _item.length; i++) {A
// 给全部的元素绑定点击事件
this.onclick = function(e) {
// 获取当前点击元素的所有class
let _classList = e.target.classList
// 判断当前元素的类名中是否有active选中类名 -1代表没有
if (e.target.className.indexOf('active') == -1) {
// 给当前元素添加active选中类名
e.target.classList.add('active')
// 获取当前元素的父元素的所有子元素
let b = e.target.parentNode.children
// 循环查找所有子元素中非自己的兄弟元素,如果兄弟元素中有active类名则删除
for (let i = 0; i < b.length; i++) {
if (b[i] != e.target && b[i].className.indexOf('active') > -1) {
b[i].classList.remove('active')
}
}
}
}
}
</script>
