Question

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

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

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

（我还想如果点击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。

$(".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

如何在单击另一个div时显示div

2 个答案: