Как сделать 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, если вы сделаете что-то подобное или планируете в будущем, поскольку все использует классы.

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