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

前言

多多点赞，会变好看！

多多留言，会变有钱！

一、body

    <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">aaaaa>li>
                <li class="layui-nav-item"><a href="#gpAnalysis" lay-id="gpAnalysis">bbbba>li>
                <li class="layui-nav-item"><a href="#bkChance" lay-id="bkChance">cccca>li>
                <li class="layui-nav-item"><a href="#gpChance" lay-id="gpChance">dddda>li>
            ul>
        div>
    div>
 
    <div class="layui-body">
        
        <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

// 导航栏点击
        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: "",
                        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');
        });