js学习--制作选项卡

选项卡制作

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>.text_one {width: 11.4%;height: 200px;}</style></head><body><div style="display: flex;justify-content: center;"><div class="option_one" style="background-color: red;">选项卡1</div><div class="option_one" style="background-color: aqua;">选项卡2</div><div class="option_one" style="background-color: aqua;">选项卡3</div></div><div style="display: flex;justify-content: center;"><div class="text_one" style="background-color: beige;">内容1</div><div class="text_one" style="background-color: yellow;display: none;">内容2</div><div class="text_one" style="background-color: skyblue;display: none;">内容3</div></div><script>let a = document.getElementsByClassName('option_one');let t = document.getElementsByClassName('text_one');console.log(a);console.log(t);for (let i = 0; i < a.length; i++) {a[i].addEventListener('click', function() {console.log(i);for (let j = 0; j < t.length; j++) {if(i==j){a[j].style.background = 'red';t[j].style.display = 'block';} else {a[j].style.background = 'aqua';t[j].style.display = 'none';}}})}</script></body>
</html>