Question

我的页面中有nav-tabs。

当有人点击某个标签时，我希望看到隐藏的div。

    <li role="presentation" class="active"><a href="#gseven" aria-controls="profile" role="tab" data-toggle="tab" class="text-uppercase" aria-expanded="false"> Annual Adult</a></li>

   <li role="presentation" class=""><a href="#ginpackage" aria-controls="messages" role="tab" data-toggle="tab" class="text-uppercase" aria-expanded="false"> Annual Junior &amp; Student</a></li>

   <li role="presentation"  id='monthly' class=""><a href="#gjdevprogram" class="text-uppercase" aria-controls="settings" role="tab" data-toggle="tab" aria-expanded="false">Corporate</a></li>

<div class='show'>Some content </div>

<style>
.show{display:none;}
</style>

<script> 
$(document).ready(function(){
if ($("#monthly").hasClass("active")) {
  $('.show').show();
}
else{
   $('.show').hide();
}})
</script>

现在让我们说公司是活跃的我希望另外一个div显示为隐藏但是没有用。

Answer 1

试试这个：

$('yourTabSelector').on('click', function() {
    $('.show').toggle();
});

或者如果你想让它只运作一次：

$('yourTabSelector').on('click', function() {
    $('.show').show();
});

Answer 2

请尝试使用以下代码：

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<style>
 .show{display:none;}
 .active{background:pink;}
</style>
<script> 
$(document).ready(function(){
  if ($("li").hasClass("active")) {
    $('.show').show();
  }
  else{
     $('.show').hide();
  }

  $("li").on('click', function() {
    $("li").removeClass('active')
    $(this).addClass("active");
    $('.show').text('you selected ' + $(this).text());
  })
})
</script>
</head>
<body>
    <li role="presentation" class="active"><a href="#gseven" aria-controls="profile" role="tab" data-toggle="tab" class="text-uppercase" aria-expanded="false"> Annual Adult</a></li>

   <li role="presentation" class=""><a href="#ginpackage" aria-controls="messages" role="tab" data-toggle="tab" class="text-uppercase" aria-expanded="false"> Annual Junior &amp; Student</a></li>

   <li role="presentation"  id='monthly' class=""><a href="#gjdevprogram" class="text-uppercase" aria-controls="settings" role="tab" data-toggle="tab" aria-expanded="false">Corporate</a></li>

   <div class='show'>Some content </div>

</body>
</html>

Answer 3

为什么不按照引导程序建议的方式使用标签：

<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#home" role="tab">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#profile" role="tab">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#messages" role="tab">Messages</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#settings" role="tab">Settings</a>
  </li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel">... this is home</div>
  <div class="tab-pane" id="profile" role="tabpanel">...this is profile</div>
  <div class="tab-pane" id="messages" role="tabpanel">...this is messages</div>
  <div class="tab-pane" id="settings" role="tabpanel">...this is settings</div>
</div>

当x选项卡处于活动状态时显示某个div

3 个答案: