Загрузка содержимого из одного div в другой div по клику

Я хочу загрузить содержимое различных <li> в один <div> при каждом щелчке по <li>. Каждый раз, когда нажимается новый <li>, он должен затем выгрузить текущее содержимое и загрузить его содержимое в <div>.Загрузка содержимого из одного div в другой div по клику

<div id="main-content">Text that will be replaced</div> 

<li class="title">1 - This will replace "main-content" text when clicked</li> 
<li class="title">2 - This will replace "main-content" text when clicked</li> 
<li class="title">3 - This will replace "main-content" text when clicked</li> 
<li class="title">4 - This will replace "main-content" text when clicked</li>

Как я могу сделать эту работу с jQuery? Похоже, это не должно быть слишком сложно, но я немного неофит jQuery.

источник

2013-08-24 user2439212

Да, вы правы. Это легко в jQuery.

узнать о селекторы (класс и идентификатор).
обработчики событий (click) и навесные устройства для обработки событий (.on()).
DOM Maniplation (.text() и .html())

$('.title').on('click', function() { 
    $('#main-content').text($(this).text()); 
});

Проверить это JSFiddle

Update: от ваших комментариев

<html> 
<head></head> 
<body> 
<div id="main-content">Text that will be replaced</div> 
<li class="title">1 - This will replace "main-content" text when clicked</li> 
<li class="title">2 - This will replace "main-content" text when clicked</li> 
<li class="title">3 - This will replace "main-content" text when clicked</li> 
<li class="title">4 - This will replace "main-content" text when clicked</li> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 
$('.title').on('click', function() { 
    $('#main-content').text($(this).text()); 
}); 
}); 
</script> 
</body> 
</html>

Попробуйте это как отдельный файл. Меня беспокоит то, что вы неправильно импортируете jQuery.

источник

2013-08-24 08:40:43 Praveen

Я пробовал это (и другие приведенные примеры), и по какой-то причине это не сработает для меня. Я работаю из Wordpress. Скопировал код в мой другой .js-файл, который правильно помечен в очередь (как jQuery), и я ничего не получаю. – user2439212

Я также попытался использовать его прямо в файле шаблона Wordpress (как есть, так и изменив «$» на «jQuery») и до сих пор ничего не получил. – user2439212

@ user2439212, что вы пытаетесь достичь на правильном JSFiddle. где вы добавляете html? – Praveen

Вы можете сделать это, как показано ниже.

$('.title').on('click',function(){ 

    $('#main-content').html($(this).html()); 

});

Fiddle Demo

источник

2013-08-24 08:39:37

@Thirumalaimurugan хорошо, я удалил их сейчас. –

$('li.title').click(function(){ 
    $('div#main-content').text(this.text()); 
})

или использовать 'HTML' метод вместо 'текст', если вы хотите переместить также HTML Содержания

источник

2013-08-24 08:39:39 bitluni

Загрузка содержимого из одного div в другой div по клику

ответ

Смежные вопросы