夜光带你走进 前端工程师(三十四 jS )
夜光序言:
以后做沉默寡言的人
不吵不闹,不哭不笑
愿自己以后面带微笑
笑看这现实云卷云舒
正文:
继续优化: 这是一个不断优化的过程 注意细节
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box{
width: 400px;
height: 40px;
margin: 100px auto;
border: 1px solid #cccccc;
}
.king{
background-color: beige;
}
.bottom div{
width: 100%;
height: 300px;
background-color: aquamarine;
display: none;
}
</style>
</head>
<script>
window.onload = function(){
var btns = document.getElementsByTagName("button"); // 所有的button
var divs = document.getElementById("divs").getElementsByTagName("div"); //需要两个来设置
for(var i=0;i<btns.length;i++){
btns[i].onclick = function(){
for(var j=0;j<btns.length;j++){
btns[j].className = "";
}
this.className = "king";
}
}
}
</script>
<body>
<div class="box">
<div class="top">
<button>海贼王</button>
<button>火影忍者</button>
<button>东京食尸鬼</button>
<button>名侦探柯南</button>
</div>
<div class="bottom" id="divs"> <!-- //div太多了 我们需要设置一个ID-->
<div style="display: block">一号盒子</div>
<div>二号盒子</div>
<div>三号盒子</div>
<div>四号盒子</div>
<div>五号盒子</div>
</div>
</div>
</body>
</html>
继续优化:
排他思想大放光彩 夜光
<script>
window.onload = function(){
var btns = document.getElementsByTagName("button"); // 所有的button
var divs = document.getElementById("divs").getElementsByTagName("div"); //需要两个来设置
for(var i=0;i<btns.length;i++){
btns[i].index = i; //获得当前索引号 十分重要 帅气
btns[i].onclick = function(){
for(var j=0;j<btns.length;j++){
btns[j].className = "";
}
this.className = "king";
//先隐藏下面所有的盒子 排他思想 你懂的 夜光
for(var i=0;i<divs.length;i++){
divs[i].style.display="none";
}
}
}
}
</script>
继续优化:
<script>
window.onload = function(){
var btns = document.getElementsByTagName("button"); // 所有的button
var divs = document.getElementById("divs").getElementsByTagName("div"); //需要两个来设置
for(var i=0;i<btns.length;i++){
btns[i].index = i; //获得当前索引号 十分重要 帅气
btns[i].onclick = function(){
for(var j=0;j<btns.length;j++){
btns[j].className = "";
}
this.className = "king";
//先隐藏下面所有的盒子 排他思想 你懂的 夜光
for(var i=0;i<divs.length;i++){
divs[i].style.display="none";
}
//留下中意的那个 和点击的索引号相关的那个 序号
divs[this.index].style.display = "block";
}
}
}
继续优化:
快要创作完成
切换栏目优化夜光 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
background-color: aliceblue;
}
.box{
width: 400px;
height: 80px;
margin: 100px auto;
border: 1px solid #cccccc;
}
.king{
background-color: aquamarine;
}
.bottom div{
width: 100%;
height: 600px;
background-color: aquamarine;
display: none;
}
p{
font-size: 30px;
font-family: 隶书;
text-align: center;
}
</style>
</head>
<script>
window.onload = function(){
var btns = document.getElementsByTagName("button"); // 所有的button
var divs = document.getElementById("divs").getElementsByTagName("div"); //需要两个来设置
for(var i=0;i<btns.length;i++){
btns[i].index = i; //获得当前索引号 十分重要 帅气
btns[i].onclick = function(){
for(var j=0;j<btns.length;j++){
btns[j].className = "";
}
this.className = "king";
//先隐藏下面所有的盒子 排他思想 你懂的 夜光
for(var i=0;i<divs.length;i++){
divs[i].style.display="none";
}
//留下中意的那个 和点击的索引号相关的那个 序号
divs[this.index].style.display = "block";
}
}
}
</script>
<body>
<p><img src="02.jpg" width="400px" height="300px"><br/>海贼王 悬赏金鉴赏 设计 ID :夜光 </p>
<div class="box">
<div class="top">
<button>一家</button>
<button>兄长</button>
<button>路飞</button>
<button>索隆</button>
<button>娜美</button>
<button>乔巴</button>
<button>弗兰克</button>
<button>罗宾</button>
<button>乌索普</button>
<button>布鲁克</button>
<button>甚平</button>
<button>SaBo</button>
<button>AiSi</button>
</div>
<div class="bottom" id="divs"> <!-- //div太多了 我们需要设置一个ID-->
<div style="display: block" id="a"><img src="一家01.jpg" width="100%" height="600px"></div>
<div id="b"><img src="海贼王17.jpg" width="100%" height="600px"></div>
<div id="c"><img src="海贼王06.png" width="100%" height="600px"></div>
<div id="d"><img src="海贼王10.jpg" width="100%" height="600px"></div>
<div><img src="娜美01.jpeg" width="100%" height="600px"></div>
<div><img src="乔巴01.jpg" width="100%" height="600px"></div>
<div><img src="海贼王12.jpg" width="100%" height="600px"></div>
<div id=""><img src="罗宾01.jpg" width="100%" height="600px"></div>
<div><img src="海贼王08.jpg" width="100%" height="600px"></div>
<div><img src="布鲁克.jpg" width="100%" height="600px"></div>
<div><img src="甚平.jpg" width="100%" height="600px"></div>
<div><img src="sabo.jpg" width="100%" height="600px"></div>
<div><img src="aisi.jpg" width="100%" height="600px"></div>
</div>
</div>
</body>
</html>