jquery - 单击另一个div时如何使div出现

Question

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

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

我想要这样，当单击 button1 时，一些文本会出现在白色区域中，然后当单击 button2 时，旧文本消失并且出现新文本等。

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

Answer 1

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

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

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

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

Answer 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如果你有多个's 如果你做这样的事情或计划在未来做这样的事情，它也会起作用，因为一切都在使用类。

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

小提琴

如果您想要显示不同的文本，您也可以执行类似的操作（如果您想要显示不同的内容，只需更改.data元素内的内容：

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

小提琴