點擊後將內容從一個div加載到另一個div

我想單擊各個<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初學者。

來源

2013-08-24 user2439212

是的，你說得對。這在jQuery中很容易。

瞭解選擇器（class and id）。
事件處理程序（click）和事件處理程序附件(.on()）。
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。

來源

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

回答

相關問題