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

未结贴
5 165
he_hehe
he_hehe 7天前
悬赏: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
    7天前
    补充: element模块已经加载, element.tabAdd也可以添加(不过添加不了 lay-id属性不知道为什么),就是切换不了[围观]
    0 回复
  • intel
    7天前
    你可以看看本宫写的。

    选项卡切换。
    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
    7天前
    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
    7天前
    写得好不好。不知道。 请大神指点。
    0 回复
  • he_hehe
    7天前
    @ [思考] 这里应该没问题啊,你看看我的代码是不是漏了点什么[爱你]
    0 回复
近期热议
layui 2.0 已正式更新到官网,周一将面向全网开放下载 84
layui 官网累计下载量突破 200000 77
(已结束)LayIM 3.x 标准版盛情巨惠,以最低门槛 加入 LayIM 会员群 58
很好奇社区里使用layui的程序员里面是前端的多还是后端的多 29
如果不能实现,请不要轻易允诺 27
建议LayUI永久免费,不要发布收费版本 16
字体图标是不是有点少了 16
看完layui2.0 ,站长确实是一个JS大婶 14
按照社区的模版用了一周时间,仿照了个系统,献丑了,晒晒哈 14
关于动态TABLE 12
layui

微信扫码关注 layui 公众号