1.html
<body>
<div class="box" id="box">
<ul class="nav" id="item">
<li class="bg_color"><a href="JavaScript: ;">百度</a></li>
<li><a href="JavaScript: ;">天貓</a></li>
<li><a href="JavaScript: ;">騰訊</a></li>
<li><a href="JavaScript: ;">新浪</a></li>
</ul>
<div class="bk">我是百度</div>
<div>我是天貓</div>
<div>我是騰訊</div>
<div>我是新浪</div>
</div>
</body>
2.css
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
.box{
width: 1000px;
height: 500px;
box-sizing: border-box;
border: 1px solid silver;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
overflow: hidden;
}
.nav{
background: pink;
}
.nav:after{
content: "";
display: table;
clear: both;
}
.nav>li{
float: left;
line-height: 50px;
padding: 0 40px;
}
.nav>li>a{
color: white;
}
.nav>.bg_color{
background: orange;
}
.box>div{
height: 450px;
text-align: center;
line-height: 450px;
font-size: 50px;
display: none;
background: skyblue;
}
.box>.bk{
display: block;
}
3.js
var item = document.getElementById("item"); //得到頭部item
var items = item.getElementsByTagName("li"); //得到頭不所有的元素
var box = document.getElementById("box"); //得到內容box
var conts = box.getElementsByTagName("div"); //得到所有的內容列
for(var i = 0; i < items.length; i++) { //遍歷所有的頭部項
var ind = items[i]; //把i的值存起來
ind.index = i; //給每一個頭部項添加index屬性
items[i].onclick = function() { //點擊某一個頭部項
for(var j = 0; j < conts.length; j++) { //遍歷所有的內容項
items[j].style.background = "transparent"; //把所有的頭部項的顏色變為透明
this.style.background = "orange"; //給點擊的這個頭部項加上背景顏色
conts[j].style.display = "none"; //把所有的內容項設置為display:none
conts[this.index].style.display = "block"; //給點擊對應的內容項設置為display:baock
}
}
}
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。
