直接上代码.....
html5:
<div id="card">
<input type="button" value="选项1" class="ing">
<input type="button" value="选项2">
<input type="button" value="选项2">
<input type="button" value="选项3">
<div>Hello javaScript!</div>
<div>Welcome to you!</div>
<div>Best wishes to you!</div>
<div>Come on!</div>
</div>
css3:
#card div {
500px;
height: 500px;
background: red;
display: none;
}
.ing {
color: green;
}
javaScript:
var card = document.getElementById("card");
var Iput = card.getElementsByTagName("input");
var box = card.getElementsByTagName("div");
for (var i = 0; i < Iput.length; i++) {
Iput[i].index = i;
Iput[i].onclick = function(){
///清除所有样式
for (var j = 0; j < Iput.length; j++) {
Iput[j].className = '';
box[j].style.display = 'none';
}
//给当前的按钮和div添加样式
this.className = 'ing';
box[this.index].style.display = 'block';
}
}
手风琴：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>shoufengqin</title>
<style type="text/css">
*{
margin:0;
padding: 0;
}
div{
margin-left: 100px;
margin-top: 100px;
500px;
height: 200px;
border: 2px solid red;
}
ul{
overflow: hidden;
height: 200px;
}
li{
float: left;
height: 200px;
list-style: none;
}
h3{
float: left;
50px;
height: 200px;
border: 2px solid blue;
}
img{
0px;
100%;
height: 100%;
}
</style>
</head>
<body>
<div>
<ul>
<li><h3>1</h3><img src="images/03.jpg"></li>
<li><h3>2</h3><img src="images/4.jpg"></li>
<li><h3>3</h3><img src="images/6.jpg"></li>
<li><h3>4</h3><img src="images/7.jpg"></li>
<li><h3>5</h3><img src="images/6.jpg"></li>
<li><h3>6</h3><img class="img" src=""></li>
</ul>
</div>
<script type="text/javascript">
var lis = document.querySelectorAll("li");
var imgs = document.querySelectorAll("img");
for(i = 0;i < lis.length;i++){
lis[i].onclick = function () {
for (var i = 0; i < lis.length; i++) {
imgs[i].style.width = "0px";
}
this.querySelector("img").style.width = "200px";
}
}
</script>
</body>
</html>