简体   繁体   English

空白时隐藏标签

[英]Hide Tab when it is empty

I've searched this page for an answer but I didn't find one. 我在这个页面上搜索了一个答案,但我找不到答案。

I have following bootstrap-tabs: 我有以下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>

How do i hide the the tab2 which contains no content at all. 如何隐藏根本不包含任何内容的tab2

I tried it with this script. 我用这个脚本试了一下。 It actually was hiding the tab with no content but I was not able to click on any of the tabs: 它实际上是隐藏了没有内容的选项卡,但我无法点击任何选项卡:

<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>

You can use the CSS :empty pseudo class: 你可以使用CSS :empty伪类:

 .panel-container > div[id^=tab] { padding: 10px; display: inline-block; border: 2px dashed orange; } .panel-container > div[id^=tab]:empty { display: none; } 
 <div class="dt-container"> <div class="panel-container"> <div id="tab1">Lorem ipsum</div> <div id="tab2"></div> </div> </div> 

Note that the tab must be completely empty (no space characters). 请注意,选项卡必须完全为空(没有空格字符)。


If you need the related content to be hidden or removed, you can use JS for that. 如果您需要隐藏或删除相关内容,可以使用JS。

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

Here you go with a solution http://jsfiddle.net/xFW8t/2751/ 在这里,您可以使用解决方案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> 

Hope this will help you. 希望这会帮助你。

You could check the length of the elements inside. 你可以检查里面元素的长度。 If the length is zero, hide it. 如果长度为零,则隐藏它。

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM