Измените образ, если он активен, если не изменится обратно

Question

Я изучаю недавно о javascript, но прямо сейчас я застрял в течение 2 дней с легкой (я думаю) проблемой! Надеюсь, я смогу помочь.

Я хочу создать небольшую вертикальную навигацию с тремя кнопками «переключение» в виде изображений для отображения различного контента. В принципе, если вы нажмете кнопку «переключение», содержимое будет размещено в правой части навигации.

Проблема в том, что я хочу изменить изображение (кнопка «переключить»), если он был нажат. И более важно изменить его обратно, когда нажата другая кнопка.

это мой недавний код, чтобы показать содержимое на правой стороне:

$('.parent div').hide(); 
$('.parent div.a').show(); 

$('#mini-nav img').click(function() { 
    console.log($(this).index('img')); 
    var $div = $('.parent > div').eq($(this).index('#mini-nav img')); 
    $div.show(); 
    $('.parent > div').not($div).hide(); 


}); 

---

 <div id="mini-nav"> 
       <img src="http://placehold.it/80x80"/> 
       <img src="http://placehold.it/80x80"/> 
       <img src="http://placehold.it/80x80"/> 
       <img src="http://placehold.it/80x80"/> 
      </div> 


<div class="parent"> 
    <div class="a"> 
     <p>this is a</p> 
    </div> 
    <div class="b"> 
     <p>this is b</p> 
    </div> 
    <div class="c"> 
     <p>this is c</p> 
    </div> 
    <div class="d"> 
     <p>this is d</p> 
    </div> 

Answer 1

Вы можете сделать что-то вроде:

$('#mini-nav img').click(function() { 
    // Mark all nav images as not selected 
    $('#mini-nav img').removeClass('selected'); 

    // Hide all images 
    $('.parent > div').hide(); 

    // Show the one the user wanted and set the class on the button 
    var $btn = $(this); 
    var index = $btn.index('#mini-nav img'); 
    $('.parent > div:eq(' + index + ')').show(); 
    $btn.addClass('selected'); 
});