如果内容为空则隐藏选项卡

Question

我正在使用 prestashop 创建商店。我的问题是，在产品描述中我有两个 bootstrap 选项卡

<ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#op">One</a></li>
    <li><a data-toggle="tab" href="#conf">Spec</a></li>
</ul>

第一个是一般描述，另一个是更技术性的。但并不是每个产品都有第二个描述，所以内容是空的。

我的问题是，如何在需要时只显示第一个选项卡？

编辑：伙计们，我不知道我是否直接写了。当 'points' 所在的 div 内容为空时，我需要隐藏选项卡。

谢谢

Answer 1

在你的第二个选项卡中添加一个 class，然后运行这个 Jquery

  $(".someclass").each(function(){
    var $txt=$(this).text();
    if($txt==""){
    $(this).closest('li').hide();
    }
    })

Without text DEMO

With text DEMO

For Multiple empty tab contents

Answer 2

这应该是：

$('.nav-tabs li').each(function () {
    $tab = $(this)
    if ($tab.text() === '') {
        $tab.hide()
    }
}

Answer 3

也许为时已晚！但我在这里写下我的答案是为了帮助别人。我有一个像这样的 nav-tab 和 bootstrap 我想隐藏没有内容的标签：

<ul class="nav nav-tabs" role="tablist" id="descriptionTab">
    <li class="active">
        <a href="#introduction" role="tab" data-toggle="tab">introduction</a>
    </li>
    <li>
        <a href="#access" role="tab" data-toggle="tab">access</a>
    </li>
    <li>
        <a href="#times" role="tab" data-toggle="tab">times</a>
    </li>
</ul>

<!-- Tab panes -->
<div class="tab-content" style="position:relative;">                  
    <div class="tab-pane fade active in EmptyFind" id="introduction">
        <h2>some text here</h2>               
    </div>
    <div class="tab-pane fade EmptyFind" id="access">
        <h2>some text here</h2>               
    </div>
    <div class="tab-pane fade EmptyFind" id="times">
        <h2>    <!--   no content or some whitespace   -->    </h2>               
    </div>
</div>

所以我们可以添加这些 jquery 代码行来隐藏其中没有内容的“#times”选项卡：

<script>
    $(document).ready(function() {
        $('.EmptyFind').each(function() {
            var $txt=$(this).text().trim().length;
            var $dataTarget=$(this).attr('id');            
            if ($txt < 1) {
                $('#descriptionTab a[href="#' + $dataTarget + '"]').closest('li').hide();
            }
        });
    });
</script>

希望对您有所帮助:)

如果内容为空则隐藏选项卡

Hide tabs if content is empty

html

css

prestashop

twitter-bootstrap