关于 tab选项卡切换的问题!求解决

提问 未结
5 462
he_hehe
he_hehe 2017-8-12
悬赏:100飞吻
<!--table-->
<div class="layui-tab" lay-filter="test1">
<ul class="layui-tab-title">
<li class="layui-this" lay-id="111" >文章列表</li>
<li lay-id="222">发送信息</li>
<li lay-id="333">权限分配</li>
<li lay-id="444">审核</li>
<li lay-id="555">订单管理</li>
</ul>

<div class="layui-tab-content">
<div class="layui-tab-item layui-show">1</div>
<div class="layui-tab-item">2</div>
<div class="layui-tab-item">3</div>
<div class="layui-tab-item">4</div>
<div class="layui-tab-item">5</div>
</div>
</div>
 
$('#tb_1').click(function(){
//alert(1);
var layid = '222';
element.tabChange('test1', layid);

});
这样为什么切换不到第二个内容,是照着文档写的[吐]
回帖
  • he_hehe
    2017-8-12
    补充: element模块已经加载, element.tabAdd也可以添加(不过添加不了 lay-id属性不知道为什么),就是切换不了[围观]
    0 回复
  • intel
    2017-8-13
    你可以看看本宫写的。

    选项卡切换。
    layui.use('element', function(){
    var element = layui.element(); //导航的hover效果、二级菜单等功能,需要依赖element模块
    //监听导航点击
    element.on('nav(demo)', function(elem){
    //console.log(elem);
    //layer.msg(elem.text());
    var id = $(elem).attr("id");
    var url = $(elem).attr("url");
    var text = $(elem).attr("text");
    add_flag = true;
    //拿到所有 选项卡 判断下有没有存在,如果存在直接切换
    $(".layui-tab-title li").each(function(){
    var lay_id = $(this).attr("lay-id");
    console.log(lay_id);
    if(lay_id){
    if(lay_id==id){
    element.tabChange('layer_tab', id); //切换到 用户点的
    set_layui_tab_item_height();
    add_flag = false;
    }
    }
    });


    if(add_flag){
    if(url){
    element.tabAdd('layer_tab', {
    title:text //用于演示
    ,content: "<iframe frameborder=0 scrolling='auto' style='width:100%;height:100%' src='${pageContext.request.contextPath}"+url+"'></iframe>"
    ,id: id //实际使用一般是规定好的id,这里以时间戳模拟下
    });
    element.tabChange('layer_tab', id); //切换到 用户点的
    set_layui_tab_item_height();
    }
    }


    });
    });
    0 回复
  • intel
    2017-8-13
    function set_layui_tab_item_height(){
    //计算layui-tab-item 需要 设置多少的高 顶部的60 layui-tab-title=41
    var body_height = document.body.offsetHeight;
    var layui_tab_item_height = (body_height-60-41);
    $(".layui-tab-item").css("height",layui_tab_item_height+"px");
    }
    0 回复
  • intel
    2017-8-13
    写得好不好。不知道。 请大神指点。
    0 回复
  • he_hehe
    2017-8-13
    @ [思考] 这里应该没问题啊,你看看我的代码是不是漏了点什么[爱你]
    0 回复