原生选项卡、手风琴

直接上代码.....

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 {
    width: 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;
			width: 500px;
			height: 200px;
			border: 2px solid red;
		}
		ul{
			overflow: hidden;
			height: 200px;
		}
		li{
			float: left;
			height: 200px;
			list-style: none;
		}
		h3{
			float: left;
			width: 50px;
			height: 200px;
			border: 2px solid blue;
		}
		img{
			width: 0px;
			width: 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>

posted @ 2018-06-26 21:08 优昙陀罗阅读(209) 评论(0) 收藏举报

刷新页面返回顶部