js之按钮切换 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            body,ul,li,p{
                margin: 0;
                padding: 0;
            }
            
            #tabs{
                width: 300px;
                margin: 100px auto;
            }
            
            #tabs ul{
                height: 30px;
                width: 100%;
                line-height: 30px;
                display: flex;
                justify-content: space-around;
                
                border-bottom: solid 2px black;
            }
            
            li{
                height: 28px;
                width: 80px;
                line-height: 28px;
                font-weight: 200;
                text-align: center;
                border: solid 1px gray;
                border-bottom: none;
                list-style: none;
                cursor: pointer;
            }
            
            .onclick{
                border-top: solid 2px gray;
                border-bottom: solid 2px white;
            }
            
            #tabs div{
                padding: 10px;
                border: solid 1px gray;
                border-top: none;
            }
            
            .hidden{
                display: none;
            }
            
            #tabs p{
                line-height: 2;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <div id="tabs">
            <ul id="menu-list">
                <li class="onclick">国际新闻</li>
                <li>国内新闻</li>
                <li>世界杯</li>
            </ul>
            <div>
                <p>美征收钢铝关税 墨西哥称将向世贸组织投诉美国</p>
                <p>英首相特雷莎与特朗普通话：美国加征钢铝关税不合</p>
                <p>台军方已发现失联战机残骸，台军近20年已坠毁8</p>
                <p>俄罗斯俄罗斯俄罗斯俄罗斯俄罗斯俄罗斯俄罗斯俄</p>
            </div>
            <div class="hidden">
                <p>台风来了！今年第4号台风生成，它给广东带来的影</p>
                <p>台风白色预警发布！第4号台风24小时内将影响深</p>
                <p>央视：滴滴顺风车再爆审核漏洞 整改成效几何？</p>
                <p>台湾水果价格崩跌20年最惨 国民党批蔡当局</p>
            </div>
            <div class="hidden">
                <p>俄罗斯世界杯前瞻:俄罗斯会成为“史上最弱东道主”吗?</p>
                <p>特使孙春兰将出席俄罗斯世界杯开幕式</p>
                <p>卡拉斯科:俄罗斯世界杯全力以赴 维特塞尔:我骄傲</p>
                <p>球迷必收藏!2018俄罗斯世界杯最终23人大名单:736人汇总!</p>
            </div>
        </div>
    </body>
    <script type="text/javascript">
        var tabs = document.getElementById('tabs');
        var menuList = document.getElementById('menu-list');
        var listItems = menuList.querySelectorAll('li');
        var divs = tabs.querySelectorAll("div");
        
        for (var i = 0;i < listItems.length;i++) {
            listItems[i].index = i;
            listItems[i].onclick = function(){
//                alert(this.index);
                for(var j = 0; j < listItems.length; j++) {
                    listItems[j].className = "";
                    divs[j].className = "hidden";
                }
                this.className = "onclick";
                divs[this.index].className = "";
            }
        }
    </script>
</html>

 

posted @ 2018-09-05 22:07  乱了夏天蓝了海  阅读(131)  评论(0)    收藏  举报