<style>
* {
margin: 0;
padding: 0;
}
#title {
overflow: hidden;
margin: 100px auto;
width: 900px;
list-style: none;
}
#title li {
float: left;
width: 300px;
height: 50px;
text-align: center;
line-height: 50px;
font-size: 30px;
background-color: blue;
}
#contents {
list-style: none;
width: 900px;
margin: 50px auto;
}
#contents li {
width: 900px;
height: 500px;
text-align: center;
line-height: 500px;
font-size: 50px;
}
#contents li:first-child {
background-color: aqua;
}
#contents li:nth-child(2) {
background-color: aquamarine;
display: none;
}
#contents li:last-child {
background-color: antiquewhite;
display: none;
}
</style>
<body>
<div>
<ul id="title">
<li>标题一</li>
<li>标题二</li>
<li>标题三</li>
</ul>
</div>
<div>
<ul id="contents">
<li>内容一</li>
<li>内容二</li>
<li>内容三</li>
</ul>
</div>
<script>
var title = document.getElementById('title').getElementsByTagName('li')
var contents = document.getElementById('contents').getElementsByTagName('li')
for (let i = 0; i < title.length; i++) {
title[i].onclick = function () {
for (let j = 0; j < contents.length; j++) {
if (i == j) {
this.style.backgroundColor = 'gold';
contents[j].style.display = "block"
} else {
title[j].style.backgroundColor = 'blue';
contents[j].style.display = 'none';
}
}
}
}
</script>