Самый простой способ загрузить DIV по нажатию кнопки?

Question

У меня здесь относительно простой вопрос.

Что мне нужно, так это;Мне нужно иметь страницу с 5 кнопками вверху и DIV под ними (изначально скрытые).Когда кнопка нажата, она загружает содержимое в DIV (в форме другого DIV)
например.

[Button 1] [Button 2] [Button 3] [Button 4] [Button 5] //5 buttons or links

<div id="content">
 // area for content to be loaded
</div>

<div id="content1">
//could be a table or image
</div>

<div id="content2">
//could be a table or image
</div>

<div id="content3">
//could be a table or image
</div>

<div id="content4">
//could be a table or image
</div>

<div id="content5">
//could be a table or image
</div>

В приведенном выше примере, когда пользователь загружает страницу, он видит 5 кнопок.Если они нажимают кнопку 5, она загружает DIV «content5» внутри DIV «содержимого», например.

<div id="content">
 <div id="content5">
</div>
</div>

Если выбрана другая кнопка, она загружает ее содержимое.с jQuery или простым JavaScript.

Большое спасибо

Answer 1

Вам необходимо привязать обработчик кликов ко всем кнопкам. В этом конкретном примере разумно было бы использовать индекс элементов, чтобы определить, какой div принадлежит button.

.

$('button').bind('click', function() {
    $('div#content').html($('div#content' + ($(this).index()+1)).html());
});

Демо : http://www.jsfiddle.net/8f8jt/

Это добавит обработчик события щелчка ко всем <button> узлам. При нажатии он ищет индекс текущей нажатой кнопки (.index() ^help ) и использует это значение для запроса соответствующего идентификатора <div> элементов. Найдя, используйте .html() ^help , чтобы получить и установить значение.

Answer 2

Вы также можете использовать jQueryUI tabs , но для этого требуется дополнительный скрипт.

Answer 3

Попробуйте это

$('#button1').click(function() {
    $("#content").html(("#content1").html());
});

$('#button2').click(function() {
    $("#content").html(("#content2").html());
});

// etc

Этот способ очищает любой существующий контент и копирует правильный div в основной #content div.