Need some help, had some help before but have come stuck again.. so any advice or any pointers in the right direction would be great..

i have a main index page which loads separate external php pages into a content div.. my problem is i have the navigation section inside each individual external page..

Navigation Section - in each individual external page

<nav>

<a class="brand" href="#">Logo</a>

    <ul>

        <li><a href="index">Home</a></li>

        <li><a href="work">Work</a></li>

        <li><a class="active" href="contact">Contact</a></li>

        <li><a href="blog">Blog</a></li>

    </ul>

 </nav>

I have put my jquery statements in a external js file and linked it to the main index page..

    $(document).ready(function() {

   // Stuff to do as soon as the DOM is ready;

$('#content').load('page/index.php', function() {

         // Jquery Gets called after the page has loaded....

    $('#slider-id').liquidSlider({

        autoSlide:true,

        autoSlideInterval: 7000,

        autoHeight:false,

        dynamicTabs: false,

 $('nav ul li a').click(function() {

       var page = $(this).attr('href');

   // Script to fade and show pages

   $('#content').hide().load('page/' + page + '.php').fadeIn('normal',function() {

       });

       //Wont Redirect

   return false;

       });

   });

       });

i know if i put a click function inside the first query.load function i can get the link to work, but if i go to click the navigation on that page, i cant seem to get to any other sites..

any help that would be super guys..

thanks