js之按钮切换

Posted menglong1214

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>

 

以上是关于js之按钮切换的主要内容，如果未能解决你的问题，请参考以下文章

在 Android Studio 的默认导航抽屉模板中使用按钮在片段之间切换

导航抽屉活动：在按钮单击时从片段移动到片段

禁用导航抽屉，在片段中切换主页按钮/向上指示器

在片段之间切换时如何处理相机？

工具栏 - 只有一个活动从抽屉切换到后退按钮

Android如何使用工具栏中的按钮切换以使用片段打开/关闭导航抽屉