时间戳

首页 > 解决方案 > 如果另一个元素具有类，则更改元素的可见性

jquery - 如果另一个元素具有类，则更改元素的可见性

问题描述

我正在尝试使用 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>

标签： jqueryhtmlcssfade

解决方案

尝试更改 slibings 选择器

在你的情况下$(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();
    }
});

....

https://jsfiddle.net/f4w0zos7/24/

推荐阅读