用原生JS实现一个Tab选项卡

最新推荐文章于 2023-05-22 15:17:34 发布

LeslRo

最新推荐文章于 2023-05-22 15:17:34 发布

阅读量191

点赞数

分类专栏： JSdemo

本文链接：https://blog.csdn.net/qq_29057851/article/details/88745522

版权

JSdemo 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

用原生JS实现一个Tab选项卡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {margin: 0; padding: 0; font-family: "\5FAE\8F6F\96C5\9ED1", Helvetica, sans-serif; font-size: 14px;-webkit-user-select: none;}
        ul,li {list-style: none;}
        .box {width: 500px; margin: 20px auto;}
        /*高度设置为29px刚好可以使上下边框重合，使得选中的选项卡与内容div的边缘重叠*/
        .box ul {top: 1px; height:29px;border-bottom: solid red 2px;}
        /*在ul下插入内容，把这句删掉之后，在.box ul属性里加入height即可*/
        /*.box ul:after{content: ""; display: block; clear: both;}*/
        /*加上margin-left使得三个li右移*/
        .box ul li {display:inline-block; margin-left: 5px; width: 100px; height: 30px; border: 1px solid green; border-bottom:none;line-height: 30px; text-align: center; cursor: pointer;}
        .box ul li.selected {background: white; border-bottom-color: lightblue;border-top: solid red 2px}
        .box div{height: 150px; line-height: 150px; background: white; border: 1px solid green; border-top:none;text-align: center; display: none; }
        .box div.selected{display: block;}
    </style>
</head>
<body>
<div class="box" id="tabFir">
    <ul>
        <li class="selected">页卡一</li>
        <li>页卡二</li>
        <li>页卡三</li>
    </ul>
    <div class="selected">275万购昌平邻铁三居 总价20万买一居</div>
    <div>内容二</div>
    <div>内容三</div>
</div>
</body>
<script>
    var tabFir = document.getElementById('tabFir'),
        oLis = tabFir.getElementsByTagName('li'),
        oDivs = tabFir.getElementsByTagName('div');

    function changeTab(n) {
        for (var i = 0; i < oLis.length; i++) {
            oLis[i].className = null;
            oDivs[i].className = null;
        }
        oLis[n].className = 'selected';
        oDivs[n].className = 'selected';
    }
    for (var m = 0; m < oLis.length; m++) {
        ~ function (index) {
            oLis[m].onclick = function () {
                changeTab(index);
            }
        }(m);//匿名函数,把i赋给index，匿名函数内部调用changeTab函数,此处的i和function内部的i不是一个值
        // 实际意思是将除了index以外的所有标签类名设置为null，保留index的标签类型为selected。匿名函数外面的for循环使得三个标签都可以成为index
        //匿名函数写在for循环内部，不会有每次index值都相等的情况
    }
</script>

</html>

需要注意的地方是CSS的设计；
JS部分思路比较简单，记住循环嵌套的思路。

LeslRo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用原生JS实现一个Tab选项卡

用原生JS实现一个Tab选项卡<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> * {margin: 0; padding: 0; font...
复制链接

扫一扫