Question

I have a HTML page with a vertical menu. I would like to click on a menu item to open between div tag content item.

This is the HTML

 <div id="navigation">
  <ul id="list-links">
    <li ><a id="pollo" href="">Pollo</a></li>
    <li><a id="tacchino" href="">Tacchino</a></li>
    <li><a id="prodotti" href="">Prodotti</a></li>
</ul>

<div id="contentPro">

</div>

     </div>

And this the JS:

        $('#list-links li a' ).click(function(){  
        $clicked = $(this);
        var idToLoad = $clicked.attr("id")
        var url=idToLoad+'.html';

         $('#contentPro').load(url);

});  

Why the external HTML don’t load between DIV tag??thanks

Answer 1

Wrap your code inside ready event like

$(document).ready(function(){
    $('#list-links li a' ).click(function(e){ 
        e.preventDefault();
        $clicked = $(this);
        var idToLoad = $clicked.attr("id")
        var url=idToLoad+'.html';
        $('#contentPro').load(url);
     });
});