如果标签内容为空，则无法隐藏导航标签

Question

我正在使用 bootstrap 导航标签，如果标签内容为空，我不想显示标签。

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

问题是如果我有更多的标签，所以我使用 class.But 我无法得到结果。

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();
    }
  });

})

Answer 1

您已经添加了两个 class 属性，所以将其设为一个

        <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();
                        }
                      });

                 });

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

你有这个错误：

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

如果标签内容为空，则无法隐藏导航标签

Unable to hide nav-tabs if its tab content is empty

javascript

jquery

tabs

navbar

twitter-bootstrap