隐藏/显示在引导选项卡选项上单击此处

Question

我想在选择特定标签时隐藏“点击此处”选项。当选择一个时，其他三个“点击此处”应该是可见的。

我无法弄清楚如何使用两个标签做同样的事情。图像应始终可见，但如果选择了图像，则应隐藏图像下方的单击此处按钮。

<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会添加类＆＃34;活动＆＃34;点击了LI。使用这个类，你可以轻松隐藏降序元素。

Answer 3

因此，如果我很了解您的需求，这是一个非常基本的解决方案。首先在按钮上添加一些ID，然后编写一些类似下面的函数。我只弄了两个。在这些功能中，如果单击一个按钮，则会显示另一个按钮，并将单击的按钮设置为隐藏：）

＆＃13;

＆＃13;

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

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;