首页 > 代码库 > js制作一个简单的选项卡

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="http://www.mamicode.com/周杰伦" class="color"/>

    <input type="button"  id="but2" value="http://www.mamicode.com/五月天" />

    <input type="button"  id="but3" value="http://www.mamicode.com/卢广仲" />

    <input type="button"  id="but4" value="http://www.mamicode.com/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制作一个简单的选项卡