根據選擇顯示div並隱藏上一個div

Question

我想知道如何通過單擊另一個DIV，然后隱藏之前處於活動狀態的另一個DIV來顯示DIV。

我在弄亂JQuery slideUp（）和slideDown（）; 而且我似乎無法使其正常工作。

這是我正在使用的JSFiddle，只是在搞亂： https ://jsfiddle.net/wLayxqq2/

我正在嘗試顯示與這些顏色有關的內容！

我發現了類似的JSFiddle，它顯示了如何隱藏和顯示ONE div中的內容，而不顯示如何隱藏先前的“活動” div中的內容！

代碼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>

代碼CSS：

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

Answer 1

給div一個數據屬性並用顏色映射，您可以像

<div data-id="red" class="option">Red</div>
<div data-id="yellow" class="option">Yellow</div>
<div data-id="blue" 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>

jQuery的

$(".colors").hide();
$(".option").click(function(){
    $(".colors").hide();
    $("#"+$(this).data("id")).show();
});

小提琴

Answer 2

嘗試

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

});

DEMO

Answer 3

HTML：紅色黃色綠色

<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>

JS：

$('.option').click(function(){
    $('.colors').hide();
    $('#' + $(this).data('id')).show();
});

Answer 4

您有一個小錯誤：

<div class="option">Green</div>
...
<div id="blue" class="colors"> This is content for Green </div>

因此，在DIV中使用名稱顯示內容可能會使您失敗。

相反，您可以在要單擊的div中包含一些唯一的標識信息。 您可以使用jQuery的data（）方法。

 $(".option").on("click", function(e){ var id = $(this).data("color"); $(".colors").hide(); // Hide all content DIVs $("#"+id).show(); // Show the target DIV }) 

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

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="option" data-color="red">Red</div> <div class="option" data-color="yellow">Yellow</div> <div class="option" data-color="green">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="green" class="colors"> This is content for Green </div> 

您更新的小提琴

Answer 5

<div class="option" data-color="red">Red</div>
<div class="option"  data-color="yellow">Yellow</div>
<div class="option"  data-color="green">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="green" class="colors"> This is content for Green </div>

$(".option").on("click",function(){
    color = $(this).data("color");
    $(".colors").slideUp();
    $("#"+color).slideDown();
})

https://jsfiddle.net/4q38yo4z/