Question

i have a nav bar which has li items like menu1….menu5 and they are addressed by class. i have 5 php files named as wrap1…wrap5.
i want to load those files in the container of index.php when one of the menu bar li is clicked. I used the load function but to vain.

    $('.menu1').click(function(){
       $('#container').load('views/wrap2.php', function() {
       $('#container').fadeIn('slow') ;
   });
});

Also in index.php i am including all the necessary pages like top.php , navbar.php , body.php & footer.php. Is that an issue ????

EDIT —-

here’s the index.php

<?php
   require ('views/top.php') ;
   require ('views/quick.php') ;
   require ('views/navbar.php') ;
   echo '<div id="container">';
   echo '</div>';

   require ('views/footer.php') ;

?>

<div id="tabs">
<ul>
    <a href="views/wrap1.php"><li class="wrap1"> Home &nbsp&nbsp </li></a>
    <a href="views/wrap2.php"><li class="wrap2"> Packages</li></a>
    <a href="views/wrap3.php"><li class="wrap3"> Clients &nbsp </li></a>
    <a href="views/wrap4.php"><li class="wrap4">  Creations</li></a>
    <a href="views/wrap5.php"><li class="wrap5"> Reach Us &nbsp </li></a>
</ul>

</div>

Answer 1

Use this code

$(document).ready(function(){
     $('#tabs li').click(function(){
     $('#container').load('views/'+$(this).attr("class")+'.php', function() {
        $('#container').fadeIn('slow') ;
       });
        return false;
    });
})

Here is LIVE DEMO