次のタブのクリックで前の画像を隠すには？

Question

私は3つのタブを持っています。スライダーのような背景画像があります。ページの最初の画像を正しく読み込むと、正しく表示されます。ページを読み込んだ後、タブをクリックすると、新しい画像の背景が前の画像に隠れずに前の画像の下に来ます。私は任意のタブをクリックすると、タブのセクションの画像の背景を変更する必要があります。私の問題は、以前のクリックしたタブの画像を非表示にする方法です。私を助けてください！

<ul class="nav nav-tabs tabIcon" role="tablist"> 
    <li class="condos"> 
     <a href="#condos" role="tab" data-toggle="tab"> 
      <i class="fa fa-university" aria-hidden="true"></i> 
      <span class="tablink">Condos</span> 
     </a> 
    </li> 
    <li class="cruises"> 
     <a href="#cruises" role="tab" data-toggle="tab"> 
      <i class="fa fa-ship" aria-hidden="true"></i> 
      <span class="tablink">Cruises</span> 
     </a> 
    </li> 
    <li class="packages"> 
     <a href="#packages" role="tab" data-toggle="tab"> 
      <i class="fa fa-suitcase" aria-hidden="true"></i> 
      <span class="tablink">Packages</span> 
     </a> 
    </li> 
    <li class="flights"> 
     <a href="#flights" role="tab" data-toggle="tab"> 
      <i class="fa fa-plane" aria-hidden="true"></i> 
      <span class="tablink">Flights</span> 
     </a> 
    </li> 
    <li class="cars"> 
     <a href="#cars" role="tab" data-toggle="tab"> 
      <i class="fa fa-car" aria-hidden="true"></i> 
      <span class="tablink">Cars</span> 
     </a> 
    </li> 
    <li class="hotel"> 
     <a href="#hotel" role="tab" data-toggle="tab"> 
      <i class="fa fa-building-o" aria-hidden="true"></i> 
      <span class="tablink">Hotels</span> 
     </a> 
    </li> 
</ul> 





<div class="tab-content"> 
    <div role="tabpanel" class="tab-pane active" id="hotel"> 
     <content 1> 
    </div> 
    <div role="tabpanel" class="tab-pane" id="cars"> 
     <content 2> 
    </div> 
    <div role="tabpanel" class="tab-pane" id="flights"> 
     <content 3> 
    </div> 
    <div role="tabpanel" class="tab-pane" id="condos"> 
     <content 4> 
    </div> 
    <div role="tabpanel" class="tab-pane" id="packages"> 
     <content 5> 
    </div> 
    <div role="tabpanel" class="tab-pane" id="cruises"> 
     <content 6> 
    </div> 
</div> 





<script> 
$(document).ready(function() { 
    $(".hotel").click(function() { 
     $(".slice1").addClass("imgActive"); 
    }); 
    $(".cars").click(function() { 
     $(".slice2").addClass("imgActive"); 
    }); 
    $(".flights").click(function() { 
     $(".slice3").addClass("imgActive"); 
    }); 
    $(".packages").click(function() { 
     $(".slice4").addClass("imgActive"); 
    }); 
    $(".cruises").click(function() { 
     $("slice5").addClass("imgActive"); 
    }); 
    $(".condos").click(function() { 
     $(".slice6").addClass("imgActive"); 
    }); 
}); 
</script> 



<!-- images--> 
<ul> 
    <li> 
     <img src="~/Content/Images/rccship.png" class="imgSlide slice1 imgActive"/> 
    </li> 
    <li> 
     <img src="~/Content/Images/overwaterbungalowsresized-3.png" class="imgSlide slice2"/> 
    </li> 
    <li> 
     <img src="~/Content/Images/hiker.png" class="imgSlide slice3"/> 
    </li> 
    <li> 
     <img src="~/Content/Images/santorini1.png" class="imgSlide slice4"/> 
    </li> 
    <li> 
     <img src="~/Content/Images/airplanerevised.png" class="imgSlide slice5"/> 
    </li> 
    <li> 
     <img src="~/Content/Images/beachcondos.png"class="imgSlide slice6"/> 
    </li> 
</ul> 
<!--/images--> 

Answer 1

このコードをjsコードに置き換えてください。

<script> 
$(document).ready(function() { 
    $(".hotel").click(function() { 
     $(".slice1").addClass("imgActive"); 
$(".slice6").removeClass("imgActive"); 
    }); 
    $(".cars").click(function() { 
     $(".slice2").addClass("imgActive"); 
$(".slice1").removeClass("imgActive"); 
    }); 
    $(".flights").click(function() { 
     $(".slice3").addClass("imgActive"); 
$(".slice2").removeClass("imgActive"); 
    }); 
    $(".packages").click(function() { 
     $(".slice4").addClass("imgActive"); 
$(".slice3").removeClass("imgActive"); 
    }); 
    $(".cruises").click(function() { 
     $("slice5").addClass("imgActive"); 
$(".slice4").removeClass("imgActive"); 
    }); 
    $(".condos").click(function() { 
     $(".slice6").addClass("imgActive"); 
$(".slice5").removeClass("imgActive"); 
    }); 
}); 
</script> 

Answer 2

<script> 
    $(document).ready(function() { 
     $(".hotel").click(function() { 
      $(".slice1").addClass("imgActive"); 
      $(".slice2, .slice3, .slice4, .slice5, .slice6").removeClass("imgActive"); 

     }); 
     $(".cars").click(function() { 
      $(".slice2").addClass("imgActive"); 
      $(".slice1, .slice3, .slice4, .slice5, .slice6").removeClass("imgActive"); 

     }); 
     $(".flights").click(function() { 
      $(".slice3").addClass("imgActive"); 
      $(".slice1, .slice2, .slice4, .slice5, .slice6").removeClass("imgActive"); 

     }); 
     $(".packages").click(function() { 
      $(".slice4").addClass("imgActive"); 
      $(".slice1, .slice2,.slice3, .slice5, .slice6").removeClass("imgActive"); 

     }); 
     $(".cruises").click(function() { 
      $(".slice5").addClass("imgActive"); 
      $(".slice1, .slice2,.slice3, .slice4, .slice6").removeClass("imgActive"); 
     }); 
     $(".condos").click(function() { 
      $(".slice6").addClass("imgActive"); 
      $(".slice1, .slice2,.slice3, .slice4, .slice5").removeClass("imgActive"); 

     }); 
    }); 
</script>