选项卡html版本

最新推荐文章于 2024-09-11 18:57:44 发布

久梦辉辰

最新推荐文章于 2024-09-11 18:57:44 发布

阅读量60

点赞数

文章标签：数学建模 java html

本文链接：https://blog.csdn.net/qinhanxu/article/details/130940436

版权

<body>
    <div class="ele">
        <ul>
            <li class="active"><a href="#">公告</a></li>
            <li><a href="#">规则</a></li>
            <li><a href="#">论坛</a></li>
            <li><a href="#">公益</a></li>
        </ul>
    </div>

    <div class="elec" style="display: black;">
        <p><a href="">联合国任命马云任数字小组联合主席</a></p>
        <p><a href="">天猫双11全球化</a> <a href="">猫晚将升级为“开场秀”</a></p>
    </div>
    <div class="elec" style="display: none;">
        <p><a href="">新增《淘宝网抽检标准（商用厨房电器）》公示通知</a></p>
        <p><a href="">《淘宝禁售商品管理规范》关于证券咨询类商品规则解读变更公示通知</a></p>
    </div>
    <div class="elec" style="display: none;">
        <p><a href="">小二分享大促干货</a></p>
        <p><a href="">陌生人拼团上线</a> <a href="">运营神器年中大促活动</a></p>
    </div>
    <div class="elec" style="display: none;">
        这是内容无所谓

    </div>
</body>

</html>


<script type="text/javascript">
    window.onload = function () {
        // 变量  obth是名字  oelec也是变量名字
        var obtn = document.getElementsByTagName("li");
        // 这是引入li标签的,也可以改为其他标签，看效果
        var oElec = document.getElementsByClassName("elec");
        // 这是引入内容部分（elec未命名的div，可以更改）
        // 下面是for循环获取js的内容
        var i = 0;
        // 变量为0，for循环必须从0开始，因为是起点
        for (i = 0; i < obtn.length; i++) {
            //上面这个为ef判断144 起点为0，i小于obtn的变量，length是长度，i++每回都+1
            obtn[i].index = i;
            //记录索引值 
            obtn[i].onclick = function () {
                //  监听事件  
                for (var j = 0; j < obtn.length; j++) {
                    // 清除效果
                    obtn[j].className = "";
                    oElec[j].style.display = ' none ';
                } 
                
                // 加类名
                this.className = "active";
                // 给下面的文字输入加类名
                oElec[this.index].style.display = "block ";
            };
        }
    };
</script>