前端——Layui的导航栏与tab页联动

一、body

html 复制代码

<!--  导航栏  -->
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <ul id="nav" class="layui-nav layui-nav-tree" lay-filter="stock">
                <li class="layui-nav-item layui-this"><a href="#wholeAnalysis" lay-id="wholeAnalysis">整体分析</a></li>
                <li class="layui-nav-item"><a href="#bkAnalysis" lay-id="bkAnalysis">aaaa</a></li>
                <li class="layui-nav-item"><a href="#gpAnalysis" lay-id="gpAnalysis">bbbb</a></li>
                <li class="layui-nav-item"><a href="#bkChance" lay-id="bkChance">cccc</a></li>
                <li class="layui-nav-item"><a href="#gpChance" lay-id="gpChance">dddd</a></li>
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <!--  tab页  -->
        <div id="tab" class="layui-tab" lay-filter="stock" lay-allowClose="true">
            <ul class="layui-tab-title">
                <li class="layui-this" lay-id="wholeAnalysis">整体分析</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <iframe id="wholeAnalysis" src="wholeAnalysis" frameborder="0" height="100%" width="100%"></iframe>
                </div>
            </div>
        </div>
    </div>

二、JS

javascript 复制代码

// 导航栏点击
        element.on('nav(stock)', function (data) {
            const layId = this.getAttribute('lay-id')
            if (layId == null) {
                return 0;
            } else {
                //判断是否存在tab
                let exist = $("li[lay-id='" + layId + "']").length; 
                if (exist == 0) {
                    element.tabAdd('stock', {
                        title: this.innerHTML,
                        content: "<iframe id='" + layId + "' frameborder='0' src='" + layId + "' scrolling='auto' height='100%' width='100%'></iframe>",
                        id: layId
                    });
                }
                setIframeHeight(document.getElementById(layId));
                element.tabChange('stock', layId);
            }
        });

        // tab页点击
        element.on('tab(stock)', function () {
            let Len = $("#nav li a").length;
            let targetIndex;
            for (let i = 0; i < Len; i++) {
                if ($(this).context.textContent == $("#nav li a")[i].outerText) {
                    //tab内容和垂直导航相等时，记录下序号
                    targetIndex = i;
                }
            }
            // 更新layui-this样式类
            $("#nav").find('.layui-this').removeClass('layui-this');
            $("#nav li a").eq(targetIndex).parentsUntil("#nav").addClass("layui-this");
            location.hash = this.getAttribute('lay-id');
        });