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

一、body

    

        

            

                
整体分析
                
aaaa
                
bbbb
                
cccc
                
dddd
            
        
    

    

        
        

            

                
整体分析
            
            

                

                    
                
            
        
    

二、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');
        });