hide/show нажмите здесь на вкладке начальной загрузки

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

при нажатии на вкладку, самозагрузка добавляет класс "активный" на клик LI. используя этот класс, вы можете легко скрыть нисходящие элементы.

Answer 2

это сотовый сделать трюк

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

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

https://jsfiddle.net/4f89746o/

Answer 3

Итак, если я хорошо понял, что вам нужно, это действительно базовое решение. Сначала добавьте несколько идентификаторов к вашим кнопкам, а затем напишите некоторые функции, такие как следующие. У меня только 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>