代码之家 › 专栏 › 技术社区 › Raviteja

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

navbar tabs twitter-bootstrap jquery javascript

Raviteja · 技术社区 · 10 年前

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

我有一个 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>

滑动分页

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

})

2 回复 | 直到 10 年前

harry 10 年前

您已经添加了两个类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();
                        }
                      });

                 });

ADreNaLiNe-DJ Huy Thành TrÆ°Æ¡ng 10 年前

这是工作代码:

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

您有以下错误:

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