js制作一个简单的选项卡
Posted 阿鸠
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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="Eminem" /> <div style="display: block;">周杰伦的歌我全部都会唱!!</div> <div>五月天的歌曲很好听</div> <div>卢广仲的闽南歌很nice</div> <div>Eminem的歌很COOL</div> </div> </body> <script type="text/javascript"> //选项卡的原理,先让所有的都隐藏,然后让当前的显示 var main=document.getElementById("main"); var but=main.getElementsByTagName("input"); var div=main.getElementsByTagName("div"); //display:none 表示的是隐藏 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>
以上是关于js制作一个简单的选项卡的主要内容,如果未能解决你的问题,请参考以下文章