On my website I tried following a tutorial to set up a basic jquery script that will replace the content on a page into a div when a link is clicked: http://seelooh.com/portfolio.php When "websites, graph design, 3d/level editing, screen-casts" is clicked the corresponding page for each, is supposed to load its content_area div below where it says hey. but its still linking me to the page. portfolio page html: <!DOCTYPE HTML> <html> <head> <title>Seelooh | Web Designer/Developer</title> <link href="style.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="nav.js"></script> </head> <body> <div id="leftBar"> <!-- Begin Sidebar div--> <h1 class="logo">Seelooh</font></h1> <?php include("navigation.php"); ?> </div> <!-- End Side bar div--> <div id="holder"> <!-- Begin Content Div --> <b class="welcome">Portfolio <i class="name">Chris Luongo</i>.</b><br /> <br /> <div id="portlink"> <a class="menu_top" href="websites.php">Websites</a> | <a class="menu_top" href="graphicdesign.php">Graphic Design</a> | <a class="menu_top" href="3d.php">3D/Level Editing</a> | <a class="menu_top" href="video.php">Screen-Casts</a> | </div> <br/> hey j <div id="content_area"> </div> <!-- end content area --> </div> <!-- End Content Div--> </body> </html> Code (markup): nav.js (script code) $('.menu_top').click(function() { var href = $(this).attr('href'); $('#content_area').load(href); return false; }); Code (markup): I'm thinking maybe I linked to jquery.js wrong? I really dont see what I did wrong
i think you have executed the nav.js script too early.. try to move this: <script type="text/javascript" src="nav.js"></script> HTML: before you close the body tag.. something like this: </div> <!-- End Content Div--> <script type="text/javascript" src="nav.js"></script> </body> HTML:
$(document).ready(function() { $('.menu_top').click(function() { var href = $(this).attr('href'); $('#content_area').load(href); return false; }); }); Code (markup):