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


    前言

    多多点赞,会变好看!

    多多留言,会变有钱!

    一、body

    1. <div class="layui-side layui-bg-black">
    2. <div class="layui-side-scroll">
    3. <ul id="nav" class="layui-nav layui-nav-tree" lay-filter="stock">
    4. <li class="layui-nav-item layui-this"><a href="#wholeAnalysis" lay-id="wholeAnalysis">整体分析a>li>
    5. <li class="layui-nav-item"><a href="#bkAnalysis" lay-id="bkAnalysis">aaaaa>li>
    6. <li class="layui-nav-item"><a href="#gpAnalysis" lay-id="gpAnalysis">bbbba>li>
    7. <li class="layui-nav-item"><a href="#bkChance" lay-id="bkChance">cccca>li>
    8. <li class="layui-nav-item"><a href="#gpChance" lay-id="gpChance">dddda>li>
    9. ul>
    10. div>
    11. div>
    12. <div class="layui-body">
    13. <div id="tab" class="layui-tab" lay-filter="stock" lay-allowClose="true">
    14. <ul class="layui-tab-title">
    15. <li class="layui-this" lay-id="wholeAnalysis">整体分析li>
    16. ul>
    17. <div class="layui-tab-content">
    18. <div class="layui-tab-item layui-show">
    19. <iframe id="wholeAnalysis" src="wholeAnalysis" frameborder="0" height="100%" width="100%">iframe>
    20. div>
    21. div>
    22. div>
    23. div>

    二、JS

    1. // 导航栏点击
    2. element.on('nav(stock)', function (data) {
    3. const layId = this.getAttribute('lay-id')
    4. if (layId == null) {
    5. return 0;
    6. } else {
    7. //判断是否存在tab
    8. let exist = $("li[lay-id='" + layId + "']").length;
    9. if (exist == 0) {
    10. element.tabAdd('stock', {
    11. title: this.innerHTML,
    12. content: "",
    13. id: layId
    14. });
    15. }
    16. setIframeHeight(document.getElementById(layId));
    17. element.tabChange('stock', layId);
    18. }
    19. });
    20. // tab页点击
    21. element.on('tab(stock)', function () {
    22. let Len = $("#nav li a").length;
    23. let targetIndex;
    24. for (let i = 0; i < Len; i++) {
    25. if ($(this).context.textContent == $("#nav li a")[i].outerText) {
    26. //tab内容和垂直导航相等时,记录下序号
    27. targetIndex = i;
    28. }
    29. }
    30. // 更新layui-this样式类
    31. $("#nav").find('.layui-this').removeClass('layui-this');
    32. $("#nav li a").eq(targetIndex).parentsUntil("#nav").addClass("layui-this");
    33. location.hash = this.getAttribute('lay-id');
    34. });

  • 相关阅读:
    Unity包围盒
    OS操作系统——设备管理(测试习题)
    MYSQL安装及卸载
    Gralloc ION DMABUF in Camera & Display
    无涯教程-JavaScript - SUMIFS函数
    QT中QJson详细解析+代码演示
    Ruo-Yi前后端分离的数据过滤
    JavaScript展开操作符(Spread operator)的应用详解
    人非圣贤孰能无过,Go lang1.18入门精炼教程,由白丁入鸿儒,Go lang错误处理机制EP11
    java基于Springboot+vue的实验室设备申请预约管理系统 elelmentui 前后端分离
  • 原文地址:https://blog.csdn.net/qq_26230421/article/details/133580735