layui右侧导航和顶部导航条,点击顶部导航条右侧导航条也移动到相应的位置。

提问 已结 2 346
ScreenName
ScreenName 2019-1-12
悬赏:30飞吻
想要实现 点击顶部导航条右侧导航条也移动到相应的位置,怎么弄啊。
回帖
  • IDyun
    2019-1-12
      //定位菜单
    element.on('tab(demoTab)',
    function(elem) {
    var filter = 'demoNav'; //菜单
    var id = $(this).attr('lay-id');
    var navElem = $('.layui-nav[lay-filter="' + filter + '"]'); //菜单导航元素
    //移除所有选中、获取当前tab选择导航、标注选中样式、展开条目
    navElem.find('dd').removeClass('layui-this').find('a[lay-id="' + id + '"]').parent().addClass('layui-this').parents('li,dl').addClass('layui-nav-itemed')
    });

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="//res.layui.com/layui/dist/css/layui.css" media="all">
    <!-- 注意:如果你直接复制所有代码到本地,上述css路径需要改成你本地的 -->
    </head>
    <style>
    /*禁用tab首个关闭按钮*/
    .layui-tab .layui-tab-title li:first-child .layui-tab-close{
    display: none;
    }
    </style>
    <body>

    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>垂直导航菜单</legend>
    </fieldset>

    <ul class="layui-nav layui-nav-tree layui-inline" lay-filter="demoNav" style="margin-right: 10px;">
    <li class="layui-nav-item layui-nav-itemed">
    <a href="javascript:;">默认展开</a>
    <dl class="layui-nav-child">
    <dd class="layui-this"><a href="javascript:;" lay-id="11" >网站设置</a></dd>
    <dd><a href="javascript:;" lay-id="22" >用户管理</a></dd>
    </dl>
    </li>
    <li class="layui-nav-item">
    <a href="javascript:;">解决方案</a>
    <dl class="layui-nav-child">
    <dd><a lay-id="33" href="javascript:;" >移动模块</a></dd>
    <dd><a lay-id="44" href="javascript:;">后台模版</a></dd>
    </dl>
    </li>
    </ul>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
    <legend>动态操作Tab</legend>
    </fieldset>

    <div class="layui-tab" lay-filter="demoTab" lay-allowclose="true">
    <ul class="layui-tab-title"> <li class="layui-this" lay-id="11">网站设置</li></ul>
    <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">
    1. 我个人比较喜欢卡片风格的,所以你发现又是以卡片的风格举例
    2. 删除功能适用于所有风格
    </div>
    </div>
    </div>

    <script src="//res.layui.com/layui/dist/layui.js" charset="utf-8"></script>
    <!-- 注意:如果你直接复制所有代码到本地,上述js路径需要改成你本地的 -->
    <script>
    layui.use(['element', 'layer'],
    function() {
    var element = layui.element; //导航的hover效果、二级菜单等功能,需要依赖element模块
    var layer = layui.layer;
    var $ = layui.$;
    //监听导航点击
    element.on('nav(demoNav)',
    function(elem) {
    //如果点击的是条目就不切换新增选项卡。
    $(elem).parent().hasClass("layui-nav-item") || tabChange('demoTab', elem);
    });

    //选项卡是否存在
    function tabIsExist(filter, id) {
    //0=false, 1=true(存在一个选项卡)
    return !! $('.layui-tab[lay-filter="' + filter + '"]').find('.layui-tab-title li[lay-id="' + id + '"]').length;
    }
    //切换、新增选项卡
    tabChange = function(filter, elem) {
    var id = $(elem).attr('lay-id');

    if (!tabIsExist(filter, id)) {
    //新增一个Tab项
    element.tabAdd(filter, {
    id: id,
    title: elem.text(),
    content: '内容' + (Math.random() * 1000 | 0)
    })
    }
    //切换到指定Tab项
    element.tabChange(filter, id); //切换到
    }
    //定位菜单
    element.on('tab(demoTab)',
    function(elem) {
    var filter = 'demoNav'; //菜单
    var id = $(this).attr('lay-id');
    var navElem = $('.layui-nav[lay-filter="' + filter + '"]'); //菜单导航元素
    //移除所有选中、获取当前tab选择导航、标注选中样式、展开条目
    navElem.find('dd').removeClass('layui-this').find('a[lay-id="' + id + '"]').parent().addClass('layui-this').parents('li,dl').addClass('layui-nav-itemed')
    });

    });
    </script>

    </body>
    </html>
    如果是iframe 请用window获取菜单选项卡元素
    window.top
    功能:返回顶层窗口,即浏览器窗口。
    语法:window.top
    注:如果窗口本身就是顶层窗口,top属性返回的是对自身的引用;如果窗口仅在一层iframe中,top属性与parent属性等价。

    window.parent
    功能:返回父窗口。
    语法:window.parent
    注:如果窗口本身是顶层窗口,parent属性返回的是对自身的引用。
    0 回复
  • ScreenName
    2019-1-12
    @IDyun 如果是三级导航条呢?
    0 回复