layui 关闭当前tab标签页和关闭所有tab标签页

在项目中需要关闭当前tab标签页和关闭所有tab标签页。
在这里插入图片描述
关闭当前tab标签页:

function closeThis(){
        top.layui.element.tabDelete("tab", top.jQuery(".layui-tab-title .layui-this").attr("lay-id"));
    }

关闭所有tab标签页


    $('.close-all').on('click', function() {
        var tabtitle = $(".layui-tab-title li");
        var ids = new Array();
        $.each(tabtitle, function (i) {
            ids[i] = $(this).attr("lay-id");
        })
        //如果关闭所有 ,即将所有的lay-id放进数组,执行tabDeleteAll
        active.tabDeleteAll(ids);
    });
  • 7
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
使用 Bootstrap 实现 Tab 标签切换和添加内容信息以 iframe 的形式呈现,需要做如下步骤: 1.创建 HTML 文件,引入 Bootstrap 和 jQuery 库,以及一个用于显示 Tab 标签的容器和多个 Tab 标签。 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Tab Demo</title> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <ul class="nav nav-tabs"> <li class="active"><a href="#tab1" data-toggle="tab">Tab 1</a></li> <li><a href="#tab2" data-toggle="tab">Tab 2</a></li> <li><a href="#tab3" data-toggle="tab">Tab 3</a></li> <li><a href="#" data-toggle="modal" data-target="#myModal">添加</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="tab1"> <iframe src="https://www.baidu.com"></iframe> </div> <div class="tab-pane" id="tab2"> <iframe src="https://www.sina.com.cn"></iframe> </div> <div class="tab-pane" id="tab3"> <iframe src="https://www.qq.com"></iframe> </div> </div> </div> <!-- 模态框 --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">添加标签</h4> </div> <div class="modal-body"> <form> <div class="form-group"> <label for="tabName">标签名</label> <input type="text" class="form-control" id="tabName" placeholder="请输入标签名"> </div> <div class="form-group"> <label for="tabUrl">链接地址</label> <input type="text" class="form-control" id="tabUrl" placeholder="请输入链接地址"> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">取消</button> <button type="button" class="btn btn-primary" id="addTabBtn">添加</button> </div> </div> </div> </div> <script> $(function() { // 添加标签 $('#addTabBtn').click(function() { var tabName = $('#tabName').val(); var tabUrl = $('#tabUrl').val(); if (tabName && tabUrl) { // 生成新标签的 HTML 代码 var tabHtml = '<li><a href="#' + tabName + '" data-toggle="tab">' + tabName + '</a></li>'; var contentHtml = '<div class="tab-pane" id="' + tabName + '"><iframe src="' + tabUrl + '"></iframe></div>'; // 添加新标签和内容 $('.nav-tabs').append(tabHtml); $('.tab-content').append(contentHtml); // 关闭模态框 $('#myModal').modal('hide'); } }); // 显示第一个标签 $('.nav-tabs a:first').tab('show'); }); </script> </body> </html> ``` 2.在 Tab 标签中使用 iframe 标签来显示内容信息。 3.在添加按钮中使用 Bootstrap 的模态框组件来显示一个表单,以便用户输入新的标签名称和链接地址。 4.在 JavaScript 中处理添加标签的逻辑。当用户点击添加按钮时,获取表单中的标签名称和链接地址,生成新的 Tab 标签的 HTML 代码,并将新的标签和内容添加到面中。 通过以上步骤,我们就可以使用 Bootstrap 实现 Tab 标签切换和添加内容信息以 iframe 的形式呈现。用户可以通过点击标签来切换内容,也可以通过添加按钮来添加新的标签
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值