zoukankan      html  css  js  c++  java
  • js制作一个简单的选项卡

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>简单的选项卡</title>
        <style type="text/css">
            #main{
                height: 400px;
    
                 400px;
    
                margin: 20px auto;
    
            }
    
            #main>div{
    
                height: 300px;
    
                 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>
  • 相关阅读:
    常用的字符集编码
    live555—VS2010/VS2013 下live555编译、使用及测试(转载)
    win32下Socket编程(转载)
    do{...}while(0)的意义和用法(转载)
    C++ static与单例模式
    MFC多线程各种线程用法 .
    a^1+b problem
    重返现世——题解
    第K大C
    懒癌
  • 原文地址:https://www.cnblogs.com/zhengweizhao/p/6910587.html
Copyright © 2011-2022 走看看