いくつかの異なる要素の間でクラスを切り替える方法は？

Question

htmlには、.fig-8アンカー内に2つの画像があります。

.img-active = display: block

.img-inactive = display: none

HTML：

<div class="tabs1"> 
    <a class="fig-8" data-tab="tab1"> 
     <img src="/path.png" class="img-active"> 
     <img src="/selected.png" class="img-inactive"> 
    </a> 

    <a class="fig-8" data-tab="tab2"> 
     <img src="/path1.png" class="img-active"> 
     <img src="/selected.png" class="img-inactive"> 
    </a> 

    <a class="fig-8" data-tab="tab3"> 
     <img src="/path2.png" class="img-active"> 
     <img src="/selected.png" class="img-inactive"> 
    </a> 
</div> 

私に必要なのは、あなたがアンカーをクリックすると、.img-activeがあるべきであるということであるdisplay: noneと.img-inactive = display: block

私は、JSファイルでそれをやっているとして：

$('.tabs1 a').on('click', function() { 
    $(this).find('.img-active').hide(); 
    $(this).find('.img-inactive').show(); 
}); 

私が欲しいものをやっているが、あなたは第二または第三のアンカーをクリックすると、私がクリックした画像が元の形状になっていません

（デフォルト画像。）。

提案がありますか？

Answer 1

これはCSSを使用して達成できませんでしたか？ :focus疑似クラスを使用できます。

.img-inactive,.img-active {float:left;} 
 
.img-inactive {display:none;} 
 
.img-active {display:block;} 
 

 
a:focus .img-inactive {display:block;} 
 
a:focus .img-active {display:none;}

<div class="tabs1"> 
 
    <a class="fig-8" data-tab="tab1" href="#"> 
 
     <img src="//placehold.it/150/5C5/FFF?&text=active" class="img-active"> 
 
     <img src="//placehold.it/150/C55/FFF?&text=inactive" class="img-inactive"> 
 
    </a> 
 

 
    <a class="fig-8" data-tab="tab2" href="#"> 
 
     <img src="//placehold.it/150/5C5/FFF?&text=active" class="img-active"> 
 
     <img src="//placehold.it/150/C55/FFF?&text=inactive" class="img-inactive"> 
 
    </a> 
 

 
    <a class="fig-8" data-tab="tab3" href="#"> 
 
     <img src="//placehold.it/150/5C5/FFF?&text=active" class="img-active"> 
 
     <img src="//placehold.it/150/C55/FFF?&text=inactive" class="img-inactive"> 
 
    </a> 
 
</div>

それ以外の場合は、

$('.tabs1 a').on('click', function() { 
 
    $('.tabs1 a .img-inactive').hide(); 
 
    $('.tabs1 a .img-active').show(); 
 
    $(this).find('.img-inactive').show(); 
 
    $(this).find('.img-active').hide(); 
 
});

.img-inactive,.img-active {float:left;} 
 
.img-inactive {display:none;} 
 
.img-active {display:block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="tabs1"> 
 
    <a class="fig-8" data-tab="tab1" href="#"> 
 
     <img src="//placehold.it/150/5C5/FFF?&text=active" class="img-active"> 
 
     <img src="//placehold.it/150/C55/FFF?&text=inactive" class="img-inactive"> 
 
    </a> 
 

 
    <a class="fig-8" data-tab="tab2" href="#"> 
 
     <img src="//placehold.it/150/5C5/FFF?&text=active" class="img-active"> 
 
     <img src="//placehold.it/150/C55/FFF?&text=inactive" class="img-inactive"> 
 
    </a> 
 

 
    <a class="fig-8" data-tab="tab3" href="#"> 
 
     <img src="//placehold.it/150/5C5/FFF?&text=active" class="img-active"> 
 
     <img src="//placehold.it/150/C55/FFF?&text=inactive" class="img-inactive"> 
 
    </a> 
 
</div>

Answer 2

あなたはこれを試すことができますjQueryを使って行うことも非常に簡単です： -

$('.tabs1 a').on('click', function() { 
    $('.img-active').not(this).show(); 
    $('.img-inactive').not(this).hide(); 
    $(this).find('.img-active').hide(); 
    $(this).find('.img-inactive').show(); 
});