你的位置:首页 > Java教程

[Java教程]用JS制作简易选项卡


<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

#main{

height: 400px;

width: 400px;

margin: 20px auto;

}

#main>div{

height: 300px;

width: 300px;

background-color: lightpink;

color: white;

font-size: 30px;

text-align: center;

line-height: 300px;

display: none;

}

#main>div:nth-child(2){

background-color:yellow;

}

#main>div:nth-child(3){

background-color:greenyellow;

}

#main>div:nth-child(4){

background-color: #1E90FF;

}

input{

margin: 13px;

border-radius: 5px;

background-color: coral;

border: 1px solid dodgerblue;

}

.color{

background-color: red;

}

 

</style>

</head>

<body>

<div id="main">

<input type="button"  id="but1" value="杨洋" class="color"/>

<input type="button"  id="but2" value="林志颖" />

<input type="button"  id="but3" value="宋仲基" />

<input type="button"  id="but4" value="胡歌" />

<div style="display: block;">杨洋好帅</div>

<div>林志颖有可爱的kimi</div>

<div>宋仲基欧巴</div>

<div>胡歌是个大帅哥</div>

 

</div>

</body>

<script type="text/javascript">

//选项卡的原理,先让所有的都隐藏,然后让当前的显示

var main=document.getElementById("main");

var but=main.getElementsByTagName("input");

var div=main.getElementsByTagName("div");

 

for (var i=0;i<but.length;i++) {

but[i].index=i;//给每个按钮增加一个index,把index改成其他的也可以

 

but[i].onclick=function(){//绑定点击事件

 

for (var i=0;i<but.length;i++) {

div[i].style.display="none";//让所有div隐藏

but[i].className=" ";//用循环清除所有but的className

}

this.className="color";//给当前的but加上className,使其在点击时变色

div[this.index].style.display="block";//让当前对应的div显示

}

 

}

 

</script>

</html>