Hi,
I’m trying to change content depending on the <a> link the user clicks, please see the page:
http://www.alexanderlloyd.info/sennheiser/auriculares_.html (Note this page does not have the final code I have pasted below, it’s just so you can see what I mean)
ie. when they click on MX85 these earphones replace the ones that are currently displayed and the same for the rest of the links: My code is far is as follows but isn’t working, any help please?
HTML
<div id="content">
<div id="cx300">
<div class="auriculares_spec_mx560">
<h2>cx300</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec luctus varius magna.</p>
</div>
<img class="img_cx300" src="img/cx300.jpg" alt="Sennheiser Headphones CX300"/>
</div>
<div id="mx85">
<div class="auriculares_spec_mx85">
<h2>MX85</h2>
<p>Lorem ipsum dolor sit amet, ...</p>
</div>
<img class="img_mx85" src="img/mx85.png" alt="Sennheiser Headphones MX85"/>
</div>
<div id="mx560">
<div class="auriculares_spec_mx560">
<h2>MX560</h2>
<p>Lorem ipsum dolor sit amet, ....</p>
</div>
<img class="img_mx560" src="img/mx560.png" alt="Sennheiser Headphones MX560"/>
</div>
<div id="pmx80">
<div class="auriculares_spec_pmx80">
<h2>PMX80</h2>
<p>Lorem ipsum dolor sit amet, ...</p>
</div>
<img class="img_pmx80" src="img/pmx80.png" alt="Sennheiser Headphones pmx80"/>
</div>
<h1>Auriculares</h1>
<div id="menu_auriculares">
<h3>Audífonos botón</h3>
<ul id="list_aurs">
<li><a id="mx560-button" href="#">CX 300</a></li>
<li><a id="mx85-button" href="#">MX 85</a></li>
<li><a id="mx560-button" href="#">MX 560</a></li>
<li><a id="pmx80-button" href="#">PMX 80</a></li>
</ul>
CSS
#cx300{
float:right;
width:600px;
}
#mx85{
float:right;
width:600px;
display:none;
}
#mx560{
float:right;
width:600px;
display:none;
}
#pmx80{
float:right;
width:600px;
display:none;
}
Javascript
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$("#list_aurs li a").click(function(){
$clicked = $(this);
var idToLoad = $clicked.attr("id").split('-');
//we search trough the content for the visible div and we fade it out
$("#content").find("div:visible").fadeOut("fast", function(){
//once the fade out is completed, we start to fade in the right div
$(this).parent().find("#"+idToLoad[0]).fadeIn();
})
}
}
</script>
Would really appreciate the help! Thanks ever so much! BTW I’m a noob so there is probably an elementary error somewhere!