用另一个div的内容替换div

时间:2011-02-22 17:49:31

标签: jquery css html

我需要创建一个click事件,用一个链接中包含的div(.clickContent)的内容替换特定div(#main_view)的内容。这是代码:

<div id="main_view">Main View Target</div>

<ul class="webbies">
<li data-id="ab">
<a href="#"><img src="content/images/webby-andy-clarke.png" width="110" height="110" alt="" /></a>
<div class="clickContent">This is the click content</div>
</li>
</ul>


<script type="text/javascript">
$("ul.webbies li a").click(function() {
var content = $(this).html($('.clickContent').html());
$("#main_view").replace(content);
return false;       
});
</script>  

我似乎无法弄清楚如何定位.clickContent div的内容,然后替换main_view div。

提前感谢您的帮助。

2 个答案:

答案 0 :(得分:6)

这比你想象的要简单得多:

$("ul.webbies li a").click(function(e) {
    e.preventDefault();
    $("#main_view").html($('.clickContent').html());   
});

现在,如果您只有一个.clickContent div,则可能需要调整选择器。

E.g。这将选择点击链接的下一个兄弟:

$("ul.webbies li a").click(function(e) {
    e.preventDefault();
    var content = $(this).next('.clickContent').html();
    if(content) $("#main_view").html(content);
});

另外需要注意的是,如果复制的内容包含具有ID的元素,则可能会破坏JavaScript,因为您可以使用具有相同ID的多个元素。

答案 1 :(得分:1)

如果你想逃避html标签

,你也可以使用.text而不是.html