通过左侧导航栏新增tab问题!!求解

提问 已结 8 136
久201
久201 2019-9-9
悬赏:20飞吻
版本:layuiAdmin 浏览器:


如图,通过监听事件添加tab,但是点击上面a的大标签时也会新建tab,怎么搞
回帖
  • IDyun
    2019-9-9

    <!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>
    <body>
    <ul class="layui-nav layui-nav-tree layui-inline" lay-filter="demo-nav" style="margin-right: 10px;">
    <li class="layui-nav-item layui-nav-itemed">
    <a href="javascript:;">默认展开</a>
    <dl class="layui-nav-child">
    <dd><a href="javascript:;" lay-id='1' data-url='https://www.layui.com/demo/layer.html'>选项一</a></dd>
    <dd><a href="javascript:;" lay-id='2' data-url='https://www.layui.com/demo/laydate.html'>选项二</a></dd>
    </dl>
    </li>

    <li class="layui-nav-item"><a href="javascript:;" data-url='https://www.layui.com/demo/table.html' lay-id='3'>社区</a></li>
    <li class="layui-nav-item"><a href="javascript:;" >文档</a></li>
    </ul>
    <div class="layui-tab" lay-filter="demo-tab" lay-allowclose="true">
    <ul class="layui-tab-title">

    </ul>
    <div class="layui-tab-content">

    </div>
    </div>


    <script src="//res.layui.com/layui/dist/layui.js" charset="utf-8"></script>
    <!-- 注意:如果你直接复制所有代码到本地,上述js路径需要改成你本地的 -->
    <script>
    layui.use(['element','layer'], function(){
    var $ = layui.jquery
    ,layer= layui.layer
    ,$= layui.$
    ,element = layui.element; //Tab的切换功能,切换事件监听等,需要依赖element模块


    //监听导航点击
    element.on('nav(demo-nav)', function(elem){
    //console.log(elem)
    layer.msg(elem.text());
    var filter='demo-tab'
    var title = $(this).text();
    var url =$(this).data('url')
    var id=$(this).attr('lay-id')
    if(url && id){
    chageTab(filter,title,url,id);

    }
    });

    function chageTab(filter,title,url,id){

    if(!filter){
    return ;
    }
    var isTab = !Boolean($('[lay-filter="demo-tab"]').find('.layui-tab-title li[lay-id="'+id+'"]').length)
    if(isTab){
    //新增一个Tab项
    element.tabAdd(filter, {
    title: title
    ,content: url
    ,id: id
    })

    }
    element.tabChange(filter, id); //切换到
    }

    });
    </script>

    </body>
    </html>
    1 回复
  • IDyun
    2019-9-9
    layuiAdmin 不是有 方法添加的吗?
    <a lay-href="home/homepage1.html" lay-text="测试">主页一</a>
    https://fly.layui.com/jie/57558/#item-1568015668220
    0 回复
  • 久201
    2019-9-9
    @IDyun

    不是,我写的通过监听左侧导航栏添加tab的,但是他这个所有商品也在那个lay-filter里,所以也会新增,怎样让他不新增
    0 回复
  • IDyun
    2019-9-9
    监听事件添加tab 的js 是怎样的?
    0 回复
  • 久201
    2019-9-9
    @IDyun
    这样的,通过点击a标签新建tab选项卡
    0 回复
  • 久201
    2019-9-10
    @IDyun 多谢!!![嘻嘻]
    0 回复
  • 久201
    2019-9-10
    @久201 我想问下,按照这个怎么做点击tab切换到对应的左侧导航栏[抱抱]
    0 回复
  • 久201
    2019-9-10
    @IDyun 搞好了,多谢!!!
    0 回复