2013-08-24 91 views
1

我想单击各个<li>时,将各种<li>的内容加载到单个<div>中。每次单击新的<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初学者。

回答

1

是的,你说得对。这在jQuery中很容易。

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

+0

我试过这个(和其他的例子),出于某种原因它不适用于我。我正在从Wordpress工作。将代码复制到正确入队的杂项.js文件(和jQuery一样),并且我什么都没有收到。 – user2439212

+0

我也试着直接在Wordpress模板文件中使用它(原样和通过将“$”更改为“jQuery”),并且仍然没有任何东西。 – user2439212

+0

@ user2439212你正在尝试的是在JSFiddle上实现的。你在哪里添加html? – Praveen

1

你可以这样做如下。

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

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

}); 

Fiddle Demo

+0

@Thirumalaimurugan好吧,我现在删除了他们。 –

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

,或者使用 'HTML' 的方法,而不是 '文本',如果你也想移动HTML内容

相关问题