直接上代码.....
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>