js练习 选项卡效果

选项卡内容以背景色代替，选中的选项背景色变灰并显示对应的选项卡

<html>
<head>
<meta charset="utf-8">
<title>选项卡效果</title>
<style type="text/css">
    *{ margin:0 auto; padding:0;}
    #wai{ width:1000px; height:500px; margin-top:50px;}
    #btl{width:350px; height:30px; margin-left:50px;}
    .bt{ width:50px; height:30px; text-align:center; line-height:30px; float:left;}
    .bt:hover{ cursor:pointer;}
    .nr{ width:100%; height:450px; display:none;}
</style>
</head>

<body>
    <div id="wai">
        <div id="btl">
            <div class="bt" sy="0" style="background-color:#999">国内</div>
            <div class="bt" sy="1">国际</div>
            <div class="bt" sy="2">军事</div>
            <div class="bt" sy="3">财经</div>
            <div class="bt" sy="4">社会</div>
            <div class="bt" sy="5">娱乐</div>
            <div class="bt" sy="6">体育</div>
        </div>
        <div class="nr" style="background-color:#F00; display:block"></div>
        <div class="nr" style="background-color:#0F0"></div>
        <div class="nr" style="background-color:#F60"></div>
        <div class="nr" style="background-color:#00F"></div>
        <div class="nr" style="background-color:#FF0"></div>
        <div class="nr" style="background-color:#0FF"></div>
        <div class="nr" style="background-color:#F0F"></div>
    </div>
</body>
</html>
<script type="text/javascript">
    var bt = document.getElementsByClassName("bt");
    var nr = document.getElementsByClassName("nr");
    /*
        选中的标题变色，其他标题恢复原色，选中标题的对应选项卡显示，其他选项卡隐藏
    */
    for(var i=0;i<bt.length;i++)
    {
        bt[i].onclick = function()
        {
            for(var i=0;i<bt.length;i++)
            {
                bt[i].style.backgroundColor = "#fff";
            }
            this.style.backgroundColor = "#999";
            var syh = this.getAttribute("sy");
            for(var i=0;i<nr.length;i++)
            {
                nr[i].style.display = "none";
            }
            nr[syh].style.display = "block";
        }
    }
    

</script>

效果

 

posted @ 2017-12-08 10:57  黑山大胖子  阅读(172)  评论(0)  编辑  收藏  举报