原生选项卡

最新推荐文章于 2021-09-08 16:29:37 发布

java_陈序猿

最新推荐文章于 2021-09-08 16:29:37 发布

阅读量219

点赞数

分类专栏：前端插件库

本文链接：https://blog.csdn.net/maple980326/article/details/79881763

版权

前端插件库专栏收录该内容

6 篇文章 1 订阅

订阅专栏

<style>
    .tab-menu {
        overflow: hidden;
        height: 3em;
        background-color: white;
    }

    .tab-menu ul {
        overflow: hidden;
        list-style: none;
        padding-left: 0px
    }

    .tab-menu li {

        font-size: 1.2em;
        text-align: center;
        display: block;
        width: 49%;
        float: left
    }

    ul li:first-Child {
        border-right: 2px solid #EFEFF4;
    }

    .tab-box div {
        display: none;
    }

    .tab-box div:first-Child {
        display: block;
    }

    .change {
        color: #FF6600;
    }
</style>

<div class="tab">
    <div class="tab-menu">
        <ul>
            <li class="change">可用</li>
            <li>历史</li>
        </ul>
    </div>
    <div class="tab-box">
        <div> 123</div>
        <div>456</div>
        <div>789</div>
    </div>
</div>

<script type="text/javascript" src="../../assets/sbv2/js/jquery.min.js"></script>

<script>var app = new Framework7();</script>
<script>
    $().ready(function () {
        $(".tab-menu li").click(function () {
            //通过 .index()方法获取元素下标，从0开始，赋值给某个变量
            var _index = $(this).index();
            //让内容框的第 _index 个显示出来，其他的被隐藏
            $(".tab-box>div").eq(_index).show().siblings().hide();
            //改变选中时候的选项框的样式，移除其他几个选项的样式
            $(this).addClass("change").siblings().removeClass("change");
        });
    });
</script>