1

我想在单击每个内容时将各种内容加载<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 新手。

4

3 回答 3

1

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

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

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

});

小提琴演示

于 2013-08-24T08:39:37.237 回答
1

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

  1. 了解选择器（类和 id）。
  2. 事件处理程序（click）和事件处理程序附件（.on()）。
  3. 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.

于 2013-08-24T08:40:43.853 回答
0 
$('li.title').click(function(){
    $('div#main-content').text(this.text());
})

或者如果您还想移动 html 内容，请使用 'html' 方法而不是 'text'

于 2013-08-24T08:39:39.027 回答