Question

我在这个页面上搜索了一个答案，但我找不到答案。

我有以下bootstrap-tabs：

<div class="dt-container">
    <ul id="description-tabs" class="nav nav-tabs tabs-responsive" role="tablist">
       <li class="active">
           <a id="tab-description" href="#tab1" role="tab" data-toggle="tab">Description</a>
       </li>
       <li>
           <a id="tab-technicaldata" href="#tab2" role="tab" data-toggle="tab">Details</a>
       </li>
    </ul>

    <div class="panel-container">
       <div id="tab1">Lorem ipsum</div>
       <div id="tab2"></div>
    </div>
</div>

如何隐藏根本不包含任何内容的 tab2 。

我用这个脚本试了一下。它实际上是隐藏了没有内容的选项卡，但我无法点击任何选项卡：

<script>
    $(function() {
        var $tabs = $( "#dt-container" );
        $tabs.tabs();
        var offst = 0;
        $('#dt-container > div > div').each(function(index, elem) {
            if ($(elem).html().trim() === '') {
                $tabs.tabs( "remove" , index - offst);
                offst++;
            }
        });
    });
</script>

Answer 1

您可以使用CSS :empty伪类：

＆＃13;

.panel-container > div[id^=tab] {
   padding: 10px;
   display: inline-block;
   border: 2px dashed orange;
}

.panel-container > div[id^=tab]:empty {
  display: none;
}

＆＃13;

<div class="dt-container">

  <div class="panel-container">
    <div id="tab1">Lorem ipsum</div>
    <div id="tab2"></div>
  </div>
</div>

＆＃13;

请注意，该标签必须完全为空（无空格字符）。

如果您需要隐藏或删除相关内容，可以使用JS。

const tabs = document.querySelectorAll(".panel-container > div[id^=tab]:empty");
for (const tab of tabs) {
  document.querySelector(`a[href="${tab.id}"]`).parentNode.remove();
}

Answer 2

您可以使用解决方案http://jsfiddle.net/xFW8t/2751/

$(function () {
    $('.panel-container').children().each(function(){
      if($(this).contents().length === 0)
      	$('a[href="#' + $(this).attr('id') + '"]').hide();
    });
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="dt-container">
    <ul id="description-tabs" class="nav nav-tabs tabs-responsive" role="tablist">
       <li class="active">
           <a id="tab-description" href="#tab1" role="tab" data-toggle="tab">Description</a>
       </li>
       <li>
           <a id="tab-technicaldata" href="#tab2" role="tab" data-toggle="tab">Details</a>
       </li>
    </ul>

    <div class="panel-container">
       <div id="tab1">Lorem ipsum</div>
       <div id="tab2"></div>
    </div>
</div>

希望这会对你有所帮助。

Answer 3

你可以检查里面元素的长度。如果长度为零，则隐藏它。

if ($('#tab2').children().length === 0){
  $('#tab2').hide();
}

空白时隐藏标签

3 个答案: