layui tab选项卡简单样例

废话不多说，直接上代码，简单一看就懂

首先需要先导入layui的css样式，这里就不介绍了

<div class="layui-tab layui-tab-card" style="margin:0px 10px;border: none" >
        <ul id="tabNav" class="layui-tab-title" style="background-color: rgba(25,50,111,0.5);border: none">
            <li id="td_1" class="cur" style="color:white">人力资源分析</li>
            <li id="td_2" style="color:white">领导干部分析</li>
        </ul>
        <div class="layui-tab-content" style="height: 100%;margin-bottom:0px;">
            <div class="layui-tab-item li_tab show" id="li_1" style="height: 100%;">
                <iframe id="iframe_1"  style="border:0px;width:100%; height:100%; padding: 0px; margin: 0px 0px 0px 0px;"></iframe>
            </div>
            <div class="layui-tab-item li_tab" id="li_2">
                <iframe id="iframe_2"  style="border:0px;width:100%; height:100%; padding: 0px; margin: 0px 0px 0px 0px;"></iframe>
            </div>

        </div>
    </div>
    <div class="clear" style="margin-top:20px;"></div>

js代码

<script type="text/javascript">
    $(function () {
        setTimeout(function () {
            $("#li_1").height('80%');
            $("#iframe_1").attr("src", "../monitors/r1.jsp");
        }, 10);

        $("#tabNav>li").click(function () {
            $(this).addClass('cur').siblings().removeClass('cur');

            var td_id = $(this).attr("id");
            var li_id = td_id.replace("td_", "li_");
            if (!td_id) {
                return;
            }
            $('.li_tab').removeClass('show');
            $("#" + li_id).addClass('show');

            if (li_id == "li_1") {
             
                $("#" + li_id).height('80%');
                $("#iframe_1").attr("src", "../monitors/r1.jsp");
            } else if (li_id == "li_2") {
                $("#iframe_2").attr("src", "../monitors/r2.jsp");
                $("#" + li_id).height('80%');

            }

        });
    });
</script>

实现效果