hide/show 单击此处 bootstrap 选项卡选择

Question

我想在选择特定选项卡时隐藏 'Click Here' 选项。选择一个后，其他三个 'click here' 应该可见。

我不知道如何用两个选项卡做同样的事情。图片应始终可见，但如果选中图片，则图片下方的单击此处按钮应隐藏。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active">
      <a href="#home" aria-controls="home" role="tab" data-toggle="tab"><img src="http://placehold.it/140x100"></a>
      <a href="#home" aria-controls="home" role="tab" data-toggle="tab">Click Here</a>
    </li>
    <li role="presentation">
      <a href="#profile" aria-controls="profile" role="tab" data-toggle="tab"><img src="http://placehold.it/140x100"></a>
      <a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Click Here</a>
    </li>
    <li role="presentation">
      <a href="#messages" aria-controls="messages" role="tab" data-toggle="tab"><img src="http://placehold.it/140x100"></a>
      <a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Click Here</a>
    </li>
    <li role="presentation">
      <a href="#settings" aria-controls="settings" role="tab" data-toggle="tab"><img src="http://placehold.it/140x100"></a>
      <a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Click Here</a>
    </li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">Content Home</div>
    <div role="tabpanel" class="tab-pane" id="profile">Content Profile</div>
    <div role="tabpanel" class="tab-pane" id="messages">Content Messages</div>
    <div role="tabpanel" class="tab-pane" id="settings">Content Settings</div>
  </div>

</div>

请看我的codepen。 Code Pen Link

Answer 1

这个 css 应该可以解决问题

.nav-tabs li img{
    display:none;
}

.nav-tabs li.active img{
    display:block;
}

https://jsfiddle.net/4f89746o/

Answer 2

在css中：

li.active a + a { display: none; }

单击选项卡时，bootstrap 将 class "active" 添加到单击的 LI。使用此 class，您可以轻松隐藏降序元素。

Answer 3

因此，如果我很了解您的需求，那么这是一个非常基本的解决方案。首先为您的按钮添加一些 ID，然后编写一些函数，如下所示。我只写了其中的两个。在这些函数中，如果您单击一个按钮，将显示另一个按钮，而将单击的按钮设置为隐藏 :)

$( "#homeImg" ).click(function() {
 $("#homeBtn").hide(500);
 $("#profileBtn").show();
});

$( "#homeBtn" ).click(function() {
 $("#homeBtn").hide(500);
 $("#profileBtn").show();
});

$( "#profileBtn" ).click(function() {
 $("#homeBtn").show();
 $("#profileBtn").hide(500);
});

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div>

      <!-- Nav tabs -->
      <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active" >
          <a href="#home" aria-controls="home" role="tab" id="homeImg" data-toggle="tab"><img src="http://placehold.it/140x100"></a>
          <a href="#home" aria-controls="home" role="tab" id="homeBtn" data-toggle="tab">Click Here</a>
        </li>
        <li role="presentation">
          <a href="#profile" aria-controls="profile" role="tab" data-toggle="tab"><img src="http://placehold.it/140x100"></a>
          <a href="#profile" aria-controls="profile" role="tab" id="profileBtn" data-toggle="tab">Click Here</a>
        </li>
        <li role="presentation">
          <a href="#messages" aria-controls="messages" role="tab" data-toggle="tab"><img src="http://placehold.it/140x100"></a>
          <a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Click Here</a>
        </li>
        <li role="presentation">
          <a href="#settings" aria-controls="settings" role="tab" data-toggle="tab"><img src="http://placehold.it/140x100"></a>
          <a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Click Here</a>
        </li>
      </ul>

      <!-- Tab panes -->
      <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="home">Content Home</div>
        <div role="tabpanel" class="tab-pane" id="profile">Content Profile</div>
        <div role="tabpanel" class="tab-pane" id="messages">Content Messages</div>
        <div role="tabpanel" class="tab-pane" id="settings">Content Settings</div>
      </div>

    </div>

hide/show 单击此处 bootstrap 选项卡选择

hide/show click here on bootstrap tab selection

jquery

tabs