javascript - Hide Tab when it is empty - Stack Overflow

admin管理员组

文章数量:1022761

I've searched this page for an answer but I didn't find one.

I have following 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.

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>

I've searched this page for an answer but I didn't find one.

I have following 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.

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>

• javascript
• jquery
• twitter-bootstrap

Share Improve this question Follow edited Aug 24, 2017 at 16:07 cezar 12k66 gold badges5050 silver badges9090 bronze badges asked Aug 24, 2017 at 15:58 HeatLifeHeatLife 2355 bronze badges 1

• First you have <div class="dt-container">, but later you select $( "#dt-container" ). dt-container is a class, you should select it as $( ".dt-container" ). – cezar Commented Aug 24, 2017 at 16:04

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

You can use the CSS :empty pseudo class:

.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 pletely empty (no space characters).

---

If you need the related content to be hidden or removed, you can use JS for that.

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/xFW8t/2751/

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

<link href="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./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();
}

I've searched this page for an answer but I didn't find one.

I have following 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.

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>

I've searched this page for an answer but I didn't find one.

I have following 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.

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>

• javascript
• jquery
• twitter-bootstrap

Share Improve this question Follow edited Aug 24, 2017 at 16:07 cezar 12k66 gold badges5050 silver badges9090 bronze badges asked Aug 24, 2017 at 15:58 HeatLifeHeatLife 2355 bronze badges 1

• First you have <div class="dt-container">, but later you select $( "#dt-container" ). dt-container is a class, you should select it as $( ".dt-container" ). – cezar Commented Aug 24, 2017 at 16:04

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

You can use the CSS :empty pseudo class:

.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 pletely empty (no space characters).

---

If you need the related content to be hidden or removed, you can use JS for that.

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/xFW8t/2751/

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

<link href="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./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();
}

本文标签： javascriptHide Tab when it is emptyStack Overflow