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

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

本文关键字：选项 导航 隐藏 如果      更新时间：2023-09-26

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

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

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

我的问题演示 

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

您添加了两个类目录，因此使其成为一个

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

j查询：

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

这是工作代码：

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

您有此错误：

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