根据选择和放大显示div隐藏以前的div [英] Show div based on selection & hide previous div

问题描述

我想知道如何通过点击另一个DIV来显示DIV，然后隐藏一个之前处于活动状态的DIV。

我在乱搞JQuery slideUp（）和slideDown（）;我似乎无法让它工作。

这是我正在使用的JSFiddle，只是乱七八糟：
https://jsfiddle.net/wLayxqq2/

我正在尝试以显示与这些颜色相关的内容！

我发现了类似的JSFiddle，它展示了如何隐藏和显示来自ONE div的内容，而不是如何隐藏之前的内容activediv！

代码HTML：

 < div类= 选项 >红色< / DIV> 
< div class =option>黄色< / div> 
< div class =option>绿色< / div> 
 
< div id =redclass =colors>这是红色的内容< / div> 
< div id =yellowclass =colors>这是黄色的内容< / div> 
< div id =blueclass =colors>这是Green< / div>的内容
  

代码CSS：

  .option {
 display：inline-block; 
 border：solid 1px; 
 margin：5px; 
 padding：5px; 
 
  

解决方案

try

  $（。colors）。hide（）; 
 $（'。option'）。click（function（）{
 $（。colors）。hide（）; 
 $（＃+ $（this）.text （）.toLowerCase（））。show（）; 
 
}）; 
  

DEMO

I was wondering how it was possible to show a DIV by clicking on another DIV and then hiding a different DIV that was active before.

I was messing around with the JQuery slideUp() and slideDown(); and I can't seem to get it to work.

This is the JSFiddle I'm working with to just mess around: https://jsfiddle.net/wLayxqq2/

I'm trying to show the content related to those color!

I have found similar JSFiddle that show how to hide and show content from ONE div but not how to hide the content from the previous "active" div!

Code HTML:

<div class="option">Red</div>
<div class="option">Yellow</div>
<div class="option">Green</div>

<div id="red" class="colors"> This is content for red </div>
<div id="yellow" class="colors"> This is content for Yellow </div>
<div id="blue" class="colors"> This is content for Green </div>

Code CSS:

.option{
    display:inline-block;
    border: solid 1px;
    margin:5px;
    padding:5px;
}

解决方案

try

$(".colors").hide();
$('.option').click(function(){
    $(".colors").hide();
  $("#"+$(this).text().toLowerCase()).show();

});

DEMO

这篇关于根据选择和放大显示div隐藏以前的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！