<style>
button {
width: 100px;
height: 60px;
}
.nav,
.content {
display: flex;
}
.nav > li {
list-style: none;
width: 100px;
height: 60px;
border: 2px solid red;
margin: 0 10px;
text-align: center;
line-height: 60px;
}
.content > li {
width: 400px;
list-style: none;
height: 200px;
font-size: 30px;
text-align: center;
line-height: 200px;
background-color: rebeccapurple;
display: none;
}
.content > :nth-child(1) {
display: block;
}
</style>
</head>
<body>
<!-- 点击按钮设置背景色 -->
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
// 1.获取页面所有button按钮
let btns = document.querySelectorAll("button");
// 2.给每一个按钮添加点击事件
for (let i = 0; i < btns.length; i++) {
btns[i].onclick = function () {
// 所有的元素都设置背景色为 ""
for (let j = 0; j < btns.length; j++) {
btns[j].style.backgroundColor = "";
}
//排他
btns[i].style.backgroundColor = "red";
};
}
</script>
<ul class="nav">
<li>新闻</li>
<li>娱乐</li>
<li>体育</li>
</ul>
<ul class="content">
<li>新闻</li>
<li>娱乐</li>
<li>体育</li>
</ul>
<script>
let mylis = document.querySelectorAll(".nav>li");
let mycon = document.querySelectorAll(".content>li");
for (let i = 0; i < mylis.length; i++) {
mylis[i].onclick = function () {
// 将内容区域对应下标为i的元素显示,其余的隐藏
for (let j = 0; j < mycon.length; j++) {
mycon[j].style.display = "none";
}
// 排他
mycon[i].style.display = "block";
};
}
</script>
762
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
