我正在尝试使用jQuery创建一些基本功能。
我有5个容器，当单击其中一个容器时，需要显示以下段落。之后单击另一个容器时，我想显示另一个段落。 （单击第3步时，我想显示第3段）。
我尝试创建一个click函数，该函数查找元素是否具有活动类，然后显示带有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>
答案 0 :(得分：2)
尝试更改分栏选择器
在您的情况下，$(this).siblings.hide(); $（this）是不是文本的按钮
...
$(".step1").click(function() {
if($(this).hasClass("active")){
$( ".text1" ).show( "fast" );
$(".text1").siblings('p').hide();
}
});
$(".step2").click(function() {
if($(this).hasClass("active")){
$( ".text2" ).show( "fast" );
$(".text2").siblings('p').hide();
}
});
....
答案 1 :(得分：2)
这是实现您想要的目标的一种不太重复的方式。
步骤和文本框都具有相同的类（以表示它们是什么类型的项目），但是具有不同的数据属性以通过公共ID将它们链接在一起。
$(function() {
$(".step").click(function() {
var textID = $(this).data("textid");
$(".text").hide();
var text = $(".text[data-textid=" + textID + "]").show("fast");
});
});.text
{
display: none;
padding: 5px;
border: 1px solid #cccccc;
}
.step { cursor:pointer; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="step" data-textID="1">
<h3>Step 1</h3>
</div>
<div class="step" data-textid="2">
<h3>Step 2</h3>
</div>
<div class="step" data-textid="3">
<h3>Step 3</h3>
</div>
<div class="step" data-textid="4">
<h3>Step 4</h3>
</div>
<div class="step" data-textid="5">
<h3>Step 5</h3>
</div>
<p class="text" data-textid="1">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="text" data-textid="2">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="text" data-textid="3">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="text" data-textid="4">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="text" data-textid="5">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>
答案 2 :(得分：0)
请尝试使用此$（“ p：not（.text2）”）。hide（）;而不是$（“。text2”）。siblings（'p'）。hide（）; 以下是jQuery代码段：
$(".step1").click(function() {
$( ".text1" ).fadeIn();
$("p:not(.text1)").hide();
});
$(".step2").click(function() {
$( ".text2" ).fadeIn();
$("p:not(.text2)").hide();
});
$(".step3").click(function() {
$( ".text3" ).fadeIn();
$("p:not(.text3)").hide();
});
$(".step4").click(function() {
$( ".text4" ).fadeIn();
$("p:not(.text4)").hide();
});
$(".step5").click(function() {
$( ".text5" ).fadeIn();
$("p:not(.text5)").hide();
});