<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>

#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;
}

<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>