Layui标签页的实现

先上图：（这是一个页面中同时存在的两个不同的标签页，也同时用了两个方法来写的。）

<div class="layui-tab" lay-filter="tabDemo">
                <ul class="layui-tab-title">
                    <li class="layui-this" id="tab01" style="background-color: #5FB878; color: white">数据1</li>
                    <li id="tab02">数据2</li>
                    <li id="tab03">数据3</li>
                    <li id="tab04">数据4</li>
                </ul>
                <div class="layui-tab-content" style="height: 500px">
                    <div class="layui-tab-item layui-show" id="content01">
                        <h3>tab01标签页01的内容</h3>
                    </div>
                    <div class="layui-tab-item" id="content02">
                        <h3>tab02标签页02的内容</h3>
                    </div>
                    <div class="layui-tab-item" id="content03">
                        <h3>tab03标签页03的内容</h3>
                    </div>
                    <div class="layui-tab-item" id="content04">
                        <h3>tab04标签页04的内容</h3>
                    </div>
                </div>
            </div>

重点在JS部分

这里我因为标签页的内容不多，就直接显示和隐藏内容，当然也可以在不同的标签页重新写新的.html页面，问题不大，看自己使用。

layui.use(['jquery','table', 'layer', 'element'], function () {
        let $ = layui.jquery,
            form = layui.form,
            table = layui.table,
            layer = layui.layer,
            element = layui.element


        // 初始化标签页组件
        element.init();

        // 监听标签页切换事件
        element.on('tab(tabDemo)', function(data){
            // 获取当前标签页的索引
            let index = data.index;

            // 根据索引跳转到不同的页面
            if (index === 0) {
                $('#content01').show();
                $('#content02').hide();
                $('#content03').hide();
                $('#content04').hide();

                // 添加样式到第一个标签页
                $('#tab01').css({
                    backgroundColor: '#5FB878',
                    color: 'white'
                });
                // 移除样式从其他标签页
                $('#tab02, #tab03, #tab04').css({
                    backgroundColor: '',
                    color: ''
                });

            } else if (index === 1) {
                $('#content01').hide();
                $('#content02').show();
                $('#content03').hide();
                $('#content04').hide();

                // 添加样式到第一个标签页
                $('#tab02').css({
                    backgroundColor: '#5FB878',
                    color: 'white'
                });
                // 移除样式从其他标签页
                $('#tab01, #tab03, #tab04').css({
                    backgroundColor: '',
                    color: ''
                });

            } else if (index === 2) {
                $('#content01').hide();
                $('#content02').hide();
                $('#content03').show();
                $('#content04').hide();

                // 添加样式到第一个标签页
                $('#tab03').css({
                    backgroundColor: '#5FB878',
                    color: 'white'
                });
                // 移除样式从其他标签页
                $('#tab01, #tab02, #tab04').css({
                    backgroundColor: '',
                    color: ''
                });

            } else if (index === 3){
                $('#content01').hide();
                $('#content02').hide();
                $('#content03').hide();
                $('#content04').show();

                // 添加样式到第一个标签页
                $('#tab04').css({
                    backgroundColor: '#5FB878',
                    color: 'white'
                });
                // 移除样式从其他标签页
                $('#tab01, #tab02, #tab03').css({
                    backgroundColor: '',
                    color: ''
                });

            }
        });

如果想要换成页面，写成如下即可

// 根据索引跳转到不同的页面
      if (index === 0) {
        window.location.href = 'page1.html';
      } else if (index === 1) {
        window.location.href = 'page2.html';
      } else if (index === 2) {
        window.location.href = 'page3.html';
      }

第二种是通过点击事件去处理代码大致相似，只不过没有用到layui的element组件和element.init()初始化的方法，比较简单，这里不再展示。

还可以直接用layui文档中提供的代码（提供了几种风格）可以直接用，不用写JS部分

<div class="layui-tab layui-tab-brief" lay-filter="" style="margin-left: 4px; margin-top: 3px">
                            <ul class="layui-tab-title">
                                <li class="layui-this">结果内容</li>
                                <li>平衡</li>
                                <li>冻结</li>
                            </ul>
                            <div class="layui-tab-content" style="height: 500px;">
                                <div class="layui-tab-item layui-show">
                                    <div id="myCharts" style="width: 600px; height: 350px;"></div>
                                </div>
                                <div class="layui-tab-item">内容2</div>
                                <div class="layui-tab-item">内容3</div>
                            </div>
                        </div>