Question

我想在点击每个<li>时将各种<div>的内容加载到单个<li>中。每次点击新<li>时，都应该卸载当前内容并将其内容加载到<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新手。

Answer 1

您可以按照以下方式执行此操作。

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

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

});

Fiddle Demo

Answer 2

是的，你是对的。这在jQuery很容易。

了解选择器（类和ID）。
事件处理程序（click）和事件处理程序附件(.on()）。
DOM操作（.text()和.html()）

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

选中此JSFiddle

更新

<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。

Answer 3

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

或使用'html'方法代替'text'，如果你想移动html内容

单击时将内容从一个div加载到另一个div中

3 个答案: