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();
});

Fiddle

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>

您更新的Fiddle

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/

根据选择和显示div显示隐藏前一个div

5 个答案:

您更新的Fiddle