Question

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

我有一个 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();
    }
  });

})

Answer 1

你添加了两个类atrribute，所以将其设为一个

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

你有这个错误：

您可以在标签上定义两次类属性。
你选择得到由于＃符号和字符串连接，要隐藏的项目不正确结束语法错误。

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

2 个答案: