原生js写的tab切换

最新推荐文章于 2023-10-09 08:54:55 发布

伏见伊奈里

最新推荐文章于 2023-10-09 08:54:55 发布

阅读量614

点赞数

分类专栏：前端面试 JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_35313994/article/details/51674343

版权

JavaScript 同时被 2 个专栏收录

38 篇文章 0 订阅

订阅专栏

前端面试

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>实践题 - 选项卡</title>
    <style type="text/css">
        *{
        padding:0px;
        margin: 0px;
        font:12px normal "microsoft yahei";
        }
        #tabs {
        width:290px;
        padding:5px;
        height:150px;
        margin:20px;
        }
        #tabs ul{
        list-style:none;
        display: block;
        height:30px;
        line-height:30px;
        border-bottom:2px saddlebrown solid;
        }
        #tabs ul li{
        background:#fff;
        cursor:pointer;
        float:left;
        list-style:none;
        height:28px;
        line-height:28px;
        margin:0px 3px;
        border:1px solid #aaaaaa;
        border-bottom:none;
        display:inline-block;
        width:60px;
        text-align: center;
        }
        #tabs ul li.on{
        border-top:2px solid saddlebrown;
        border-bottom: 2px solid #fff;
        }
        #tabs div{
        height:120px;
        line-height: 25px;
        border:1px solid #336699;
        border-top:none;
        padding:5px;
        }
        .hide{
        display: none;
        }
    </style>
    <script type="text/javascript">
         window.onload = function(){
             var oTab = document.getElementById("tabs");
             var oUl = oTab.getElementsByTagName("ul")[0];
             var oLis = oUl.getElementsByTagName("li");
             var oDivs= oTab.getElementsByTagName("div");

             for(var i= 0;i < oLis.length;i++){
                 oLis[i].index = i;
                 oLis[i].onclick = function() {
                     for(var n= 0;n< oLis.length ;n++){
                         oLis[n].className = "";
                         oDivs[n].className = "hide";
                     }
                     this.className = "on";
                     oDivs[this.index].className = "";
                 }
             };
         }
    </script>

</head>
<body>
<div id="tabs">
    <ul>
        <li class="on">1111</li>
        <li>222</li>
        <li>333</li>
    </ul>
    <div>
        111的内容
    </div>
    <div class="hide">
       222的内容

    </div>
    <div class="hide">
        333的内容
    </div>
</div>

</body>
</html>

伏见伊奈里

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
原生js写的tab切换

1.有如下代码，请说出程序的运行结果DOCTYPE html>html> head> meta charset="utf-8" /> title>title> head> body> script type="text/javascript"> var a=0;//第一步：a=0；
复制链接

扫一扫