Ich bin ziemlich neu in Jquery und Javascript und war auf ein Projekt, das ich bin sicher, hat einen viel einfacheren Weg, um die gleiche Funktionalität. Das Folgende ist eine vereinfachte Version von dem, was ich tue:
HTML
<a class="link1" href="#">Link 1</a>
<a class="link2" href="#">Link 2</a>
<a class="link3" href="#">Link 3</a>
<div id="div1" style="display: hidden;">Content</div>
<div id="div2" style="display: hidden;">Content</div>
<div id="div3" style="display: hidden;">Content</div>
Jquery
$(".link1").click(function(){
$("#div2, #div3").hide();
$("#div1").show();
$(".link2, .link3").removeClass("active");
$(".link1").addClass("active");
});
$(".link2").click(function(){
$("#div1, #div3").hide();
$("#div2").show();
$(".link1, .link3").removeClass("active");
$(".link2").addClass("active");
});
$(".link3").click(function(){
$("#div1, #div2").hide();
$("#div3").show();
$(".link1, .link2").removeClass("active");
$(".link3").addClass("active");
});
Also im Grunde jeder Link ist sofort versteckt beide nicht-entsprechenden divs, auch wenn sie nicht unbedingt sichtbar sind und entfernt auch die aktive Klasse auf die anderen Links, auch wenn sie nicht angewendet werden (um sicherzustellen, dass sie entfernt werden) dann zeigt die entsprechende div und fügt eine aktive Klasse auf den Link. Ich frage mich, ob es einen einfacheren Weg gibt, diese Funktionalität zu erstellen, ohne alle anderen Divs auszublenden und alle aktiven Klassen zu entfernen, um sicherzustellen, dass nichts außer der einen, die ich sichtbar haben möchte, angezeigt wird.
Vielen Dank für jede Hilfe, die Sie anbieten können!!