如果其选项卡内容为空，则无法隐藏导航选项卡答案

【问题标题】：Unable to hide nav-tabs if its tab content is empty如果其选项卡内容为空，则无法隐藏导航选项卡
【发布时间】：2016-03-11 12:20:30
【问题描述】：

我正在使用引导导航选项卡，如果选项卡内容为空，我不想显示选项卡。

我有一个 DEMO，它隐藏了选项卡。我已经为特定标签写了一个（使用id）。

问题是如果我有更多的选项卡，所以我已经使用一个类实现了。但是我无法得到结果。

Demo of My problem

<ul class="nav nav-tabs" id="myTab">
  <li class="active"><a data-target="#home" data-toggle="tab">Home</a></li>
  <li><a data-target="#profile" data-toggle="tab">Profile</a></li>
  <li><a data-target="#messages" data-toggle="tab">Messages</a></li>
  <li><a data-target="#settings" data-toggle="tab">Settings</a></li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="home" class="EmptyFind">Home</div>
  <div class="tab-pane" id="profile" class="EmptyFind"></div>
  <div class="tab-pane" id="messages" class="EmptyFind">Message</div>
  <div class="tab-pane" id="settings" class="EmptyFind">Settings</div>
</div>

jQuery

$(document).ready(function() {
  $(".EmptyFind").each(function() {
    var $tid = $(this).attr("id");
    var $txt = $(this).text();
    var $tohide = $("#myTab").find($('a[data-target=#+'$tid ']'));
    if ($txt == "") {
      $('a[data-target=#+'$tid']').closest('li').hide();
    }
  });

})

【问题讨论】：

你已经添加了两个类属性，所以让它成为一个。
@harry 非常大的错误。编码过多..谢谢你让我抓到。

标签： javascript jquery twitter-bootstrap tabs navbar

【解决方案1】：

你已经添加了两个类属性，所以让它成为一个

        <ul class="nav nav-tabs" id="myTab">
          <li class="active"><a data-target="#home" data-toggle="tab">Home</a></li>
          <li><a data-target="#profile" data-toggle="tab">Profile</a></li>
          <li><a data-target="#messages" data-toggle="tab">Messages</a></li>
          <li><a data-target="#settings" data-toggle="tab">Settings</a></li>
        </ul>

        <div class="tab-content">
          <div class="tab-pane active EmptyFind" id="home">Home</div>
          <div class="tab-pane EmptyFind" id="profile" ></div>
          <div class="tab-pane EmptyFind" id="messages" >Message</div>
          <div class="tab-pane EmptyFind" id="settings">Settings</div>
        </div>

jQuery:

                $(document).ready(function() {
                      $(".EmptyFind").each(function() {
                        var $tid = $(this).attr("id");
                        var $txt = $(this).text();
                        if ($txt == "") {                               
                          $('a[data-target=#'+$tid+']').closest('li').hide();
                        }
                      });

                 });

【讨论】：

【解决方案2】：

这是工作代码：

<script>
$(document).ready(function() {
  $(".EmptyFind").each(function() {
    var tid = $(this).attr("id");
    var txt = $(this).text();
    if (txt == "") {
      $("a[data-target=" + tid + "]").parent().hide();
    }
  });

})
</script>

<ul class="nav nav-tabs" id="myTab">
  <li class="active"><a data-target="home" data-toggle="tab">Home</a></li>
  <li><a data-target="profile" data-toggle="tab">Profile</a></li>
  <li><a data-target="messages" data-toggle="tab">Messages</a></li>
  <li><a data-target="settings" data-toggle="tab">Settings</a></li>
</ul>

<div class="tab-content">
  <div class="tab-pane active EmptyFind" id="home">Home</div>
  <div class="tab-pane EmptyFind" id="profile"></div>
  <div class="tab-pane EmptyFind" id="messages">Message</div>
  <div class="tab-pane EmptyFind" id="settings">Settings</div>
</div>

你有这个错误：

您在选项卡上定义了两次类属性。
您选择器来获取由于 # 符号和字符串连接，要隐藏的项目不正确以语法错误结尾。

【讨论】：