Я пытаюсь создать некоторые базовые функции с помощью jQuery.
У меня есть 5 контейнеров, при нажатии на один из этих контейнеров должен отображаться параграф ниже.При последующем щелчке на другом контейнере я хотел бы показать еще один абзац.(При нажатии на шаге 3 я хочу, чтобы абзац 3 отображался, например).
Я попытался создать функцию щелчка, которая определяет, есть ли у элемента активный класс, и затем отображает абзац с номером X.Однако я не знаю, как я могу скрыть все остальные абзацы, чтобы показать только один.Я также хотел бы, чтобы эти абзацы исчезли.
Вот мой jsfiddle :
$("div").click(function() {
$(this).addClass('active').siblings().removeClass('active');
});
$(".step1").click(function() {
if($(this).hasClass("active")){
$( ".text1" ).show( "fast" );
$(this).siblings.hide();
}
});
$(".step2").click(function() {
if($(this).hasClass("active")){
$( ".text2" ).show( "fast" );
$(this).siblings.hide();
}
});
$(".step3").click(function() {
if($(this).hasClass("active")){
$( ".text3" ).show( "fast" );
$(this).siblings.hide();
}
});
$(".step4").click(function() {
if($(this).hasClass("active")){
$( ".text4" ).show( "fast" );
$(this).siblings.hide();
}
});
$(".step5").click(function() {
if($(this).hasClass("active")){
$( ".text5" ).show( "fast" );
$(this).siblings.hide();
}
});
.text1, .text2, .text3, .text4, .text5 {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="step1 active">
<h3>Step 1</h3>
</div>
<div class="step2">
<h3>Step 2</h3>
</div>
<div class="step3">
<h3>Step 3</h3>
</div>
<div class="step4">
<h3>Step 4</h3>
</div>
<div class="step5">
<h3>Step 5</h3>
</div>
<p class="text1">Ius cu iusto prodesset, per legimus gubergren liberavisse ex, sit sint semper fabulas ex. At eum sumo iudicabit posidonium, ex his assum nonumy eloquentiam. An tritani nonumes mei, at diam facer posidonium sed. Has id dicit partem regione. Vim soleat singulis honestatis ut. His at rebum postulant forensibus.</p>
<p class="text2">legimus gubergren liberavisse ex, sit sint semper fabulas ex. At eum sumo iudicabit posidonium, ex his assum nonumy eloquentiam. An tritani nonumes mei, at diam facer posidonium sed. Has id dicit partem regione. Vim soleat singulis honestatis ut. His at rebum postulant forensibus.</p>
<p class="text3">Prodesset, per legimus gubergren liberavisse ex, sit sint semper fabulas ex. At eum sumo iudicabit posidonium, ex his assum nonumy eloquentiam. An tritani nonumes mei, at diam facer posidonium sed. Has id dicit partem regione. Vim soleat singulis honestatis ut. His at rebum postulant forensibus.</p>
<p class="text4">Legimus gubergren liberavisse ex, sit sint semper fabulas ex. At eum sumo iudicabit posidonium, ex his assum nonumy eloquentiam. An tritani nonumes mei, at diam facer posidonium sed. Has id dicit partem regione. Vim soleat singulis honestatis ut. His at rebum postulant forensibus.</p>
<p class="text5">Set, per legimus gubergren liberavisse ex, sit sint semper fabulas ex. At eum sumo iudicabit posidonium, ex his assum nonumy eloquentiam. An tritani nonumes mei, at diam facer posidonium sed. Has id dicit partem regione. Vim soleat singulis honestatis ut. His at rebum postulant forensibus.</p>