隱藏/顯示點擊此處啓動選項卡選項

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：

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

當你點擊一個標籤，引導添加類 「活動」 所點擊李。使用這個類，你可以輕鬆地隱藏降序元素。

Answer 2

這個CSS應該做的伎倆

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

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

https://jsfiddle.net/4f89746o/

Answer 3

所以，如果我很好地理解你需要什麼，這是一個非常基本的解決方案。首先添加一些ID到你的按鈕，然後寫一些如下所示的函數。我只有其中2個。在這些功能中，如果你點擊一個按鈕，其他的顯示和一個點擊設置隱藏:)

$("#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>