如何限制用户打开最多 5 个引导选项卡窗格？答案

【问题标题】：How to limit user from opening Bootstrap Tab-Panes with maximum 5?如何限制用户打开最多 5 个引导选项卡窗格？
【发布时间】：2019-09-03 22:05:45
【问题描述】：

尽管有多个选项卡按钮可用，但用户需要被限制只能打开 5 个选项卡窗格（最多）。单击第 6 个选项卡后，需要提醒用户。

function addTab(title, url){
    var tabs=$(".tabs"),
    tabsContent=tabs.children("a");
        if(tabsContent.find(".easyui-linkbutton").length===4)   
        {
            alert("Maximum 5 Tabs are allowed");

        }
        else if ($('#tt').tabs('exists', title))
        {
            $('#tt').tabs('select', title);

        }
        else {
            var content = '<iframe scrolling="auto" frameborder="0"  src="'+url+'" style="width:100%;height:100%;"></iframe>';
            $('#tt').tabs('add',{
                title:title,
                content:content,
                closable:true
            });
        }
    }

<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<div style="margin-bottom:10px" class="tabs">
    <a href="#" class="easyui-linkbutton" onclick="addTab('tab1','http://jquery.com/')">tab1</a>
    <a href="#" class="easyui-linkbutton" onclick="addTab('tab2','http://jquery.com/')">tab2</a>
    <a href="#" class="easyui-linkbutton" onclick="addTab('tab3','http://jeasyui.com/')">tab3</a>
    <a href="#" class="easyui-linkbutton" onclick="addTab('tab4','http://jeasyui.com/')">tab4</a>
    <a href="#" class="easyui-linkbutton" onclick="addTab('tab5','http://jeasyui.com/')">tab5</a>
    <a href="#" class="easyui-linkbutton" onclick="addTab('tab6','http://jeasyui.com/')">tab6</a>
    <a href="#" class="easyui-linkbutton" onclick="addTab('tab7','http://jeasyui.com/')">tab7</a>
</div>
<div id="tt" class="easyui-tabs" style="width:400px;height:250px;">
    <div title="Home">
    </div>
</div>

尽管用户尝试使用第 6 个按钮打开，但预计只有 5 个选项卡窗格打开。用户需要收到消息提醒。

【问题讨论】：

标签： javascript php jquery css bootstrap-4

【解决方案1】：

你的代码有一个小改动

我改变了这一行

if($('.tabs-wrap').find('ul').children().length===4)

到这里

if($('.tabs-wrap').find('ul').children().length > 5)

成功了

这是你的例子

function addTab(title, url) {
  var tabs = $(".tabs"),
    tabsContent = tabs.children("a");
  if ($('.tabs-wrap').find('ul').children().length > 5)
    alert("Maximum 5 Tabs are allowed");
  else if ($('#tt').tabs('exists', title))
    $('#tt').tabs('select', title);
  else {
    var content = '<iframe scrolling="auto" frameborder="0"  src="' + url + '" style="width:100%;height:100%;"></iframe>';
    $('#tt').tabs('add', {
      title: title,
      content: content,
      closable: true
    });
  }
}

  <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
  <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
  <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
  <div style="margin-bottom:10px" class="tabs">
    <a href="#" class="easyui-linkbutton" onclick="addTab('tab1','http://jquery.com/')">tab1</a>
    <a href="#" class="easyui-linkbutton" onclick="addTab('tab2','http://jquery.com/')">tab2</a>
    <a href="#" class="easyui-linkbutton" onclick="addTab('tab3','http://jeasyui.com/')">tab3</a>
    <a href="#" class="easyui-linkbutton" onclick="addTab('tab4','http://jeasyui.com/')">tab4</a>
    <a href="#" class="easyui-linkbutton" onclick="addTab('tab5','http://jeasyui.com/')">tab5</a>
    <a href="#" class="easyui-linkbutton" onclick="addTab('tab6','http://jeasyui.com/')">tab6</a>
    <a href="#" class="easyui-linkbutton" onclick="addTab('tab7','http://jeasyui.com/')">tab7</a>
  </div>
  <div id="tt" class="easyui-tabs" style="width:400px;height:250px;">
    <div title="Home">
    </div>
  </div>

希望它有效

【讨论】：