// 排他法切换功能
(function () {
var item_ = document.getElementsByClassName('item');
var featuresText = document.getElementsByClassName('featuresText');
for (let i = 0; i < item_.length; i++) {
item_[i].setAttribute('index', i);
featuresText[i].setAttribute('index', i);
item_[i].onclick = function () {
var index = this.getAttribute('index');
for (let j = 0; j < item_.length; j++) {
item_[j].classList.remove('change');
item_[index].classList.add('change');
featuresText[j].classList.remove('show');
featuresText[index].classList.add('show');
}
}
}
})();
正常的排它法
<body>
<div class="con">
<div class="top">
<a href="#">我是天蓝色部分</a>
<a href="#">我是橘黄色部分</a>
</div>
<div class="box">
<div class="box1">天蓝色</div>
<div class="box1">橘黄色</div>
</div>
</div>
</body>
</html>
<script>
var la = document.getElementsByTagName('a');
var box1 = document.getElementsByClassName('box1');
for (var i = 0; i < la.length; i++) {
la[i].setAttribute('index', i);
la[i].onclick = function () {
var index = this.getAttribute('index');
for (var j = 0; j < la.length; j++) {
la[j].className = '';
la[index].className = 'active'
}
for (var k = 0; k < box1.length; k++) {
box1[k].style.display = 'none';
box1[index].style.display = 'block';
}
}
}
</script>
796
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
