单击另一个div时如何使div出现答案

【问题标题】：how to make a div appear when another div is clicked单击另一个div时如何使div出现
【发布时间】：2013-08-13 13:51:37
【问题描述】：

我希望你们聪明的人可以在这里帮助我。

首先，看看这个小提琴：jsfiddle.net/BvCVu/17/

我希望当 button1 被点击时，一些文本会出现在白色区域，然后当 button2 被点击时，旧的文本消失了，som new 出现了等等。

（我还想在页面加载时是否将单击button1时出现的文本显示为默认值。）

【问题讨论】：

你试过了吗？
有很多方法可以实现这一点，例如。试试这个.. stackoverflow.com/questions/773074/vertical-tabs-with-jquery

标签： jquery

【解决方案1】：

您可能需要一些其他 div 用于白色区域，以便它们正确布局，例如：

<div class="content-area" style="float:right"></div>

就 JavaScript 而言，它会是这样的：

$(".button1").click(function() {
   $(".content-area").html("This is my text.");
});

【讨论】：

【解决方案2】：

为了以下解决方案，我对 DOM 做了一些小的修改：

<div class='overdiv'>
    <a href='#'><div class='button button1'>button 1<span class="data">b1</span></div></a>
    <a href='#'><div class='button button2'>button 2<span class="data">b2</span></div></a>
    <a href='#'><div class='button button3'>button 3<span class="data">b3</span></div></a>
    <a href='#'><div class='button button4'>button 4<span class="data">b4</span></div></a>
    <div class="whitespace"></div>
</div>

我相信这会如你所愿。如果你有多个.overdiv，如果你做这样的事情或计划在未来做这样的事情，它也可以工作，因为一切都在使用类。

$(".overdiv").find(".button").click( function() {
    $this = $(this);
    $this.closest(".overdiv").children(".whitespace").text($this.text());
});
$('.button1').click();

Fiddle

如果你想显示不同的文本，你也可以这样做（如果你想显示不同的内容，只需更改 .data 元素中的内容：

$(".overdiv").find(".button").click( function() {
    $this = $(this);
    $this.closest(".overdiv").children(".whitespace").text($this.find(".data").text());
});
$('.button1').click();

Fiddle

【讨论】：