[jQuery] JQuery Script doubling div
Hello
In a website that I am developing, I have a tab navigation system and
I tried to dynamic load the #content of each page in the #content div
of the main page withe the next script and next html:
$(document).ready(function() {
$('#nav a').click(function(event) {
$('#content').load($(this).attr("href") + ' #content').fadeIn
(1000);
event.preventDefault();
});
});
<!--
Navigation Begin
================
-->
<div id="nav">
<ul>
<li><a href="index.html"
title="presentation"><span>Presentación</span></a></li>
<li><a href="links.html" title="links"><span>Enlaces</span></
a></li>
</ul>
</div>
<!--
Navigation End
==============
-->
<!--
Content Begin
=============
-->
<div id="content">
<!--
Mod Begin
=========
-->
<div class="mod">
Lore Ipsum Presentation
</div>
<!--
Mod End
=======
-->
</div>
<!--
Content End
===========
-->
But when I run the script it doubling the #content div.
<!--
Content Begin
=============
-->
<div id="content"><div id="content">
<!--
Mod Begin
=========
-->
<div class="mod">
lore ipsum links
</div>
</div></div>
<!--
Content End
===========
-->
Can someone help me with this?
p.d: Sorry for my bad english.