javascript - Display the other page content to Index.html page without refresh -
can tell me code display other page content in index page without refresh when click on anchor tag. pages in html. sec page content can shown slide.
i want code html files not php.
page1.html
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>untitled document</title> <script language="javascript" src="jquery-1.4.4.min.js"></script> <script> $(function(){ $("#menu > a").click(function(e){ //e.preventdefault(); /* if uncomment above line, html5 nonsupported browers won't alter url display ajax content; if commented, html5 nonsupported browers reload page specified link. */ //get link location clicked pageurl = $(this).attr("href"); //to ajax content , display in div id 'content' $.ajax({url:pageurl,success: function(data){ $("#content").html(data); }}); //to alter browser url 'pageurl' if(pageurl!=window.location){ window.history.pushstate({path:pageurl},"",pageurl); } homecoming false; }); }); /* below code override button ajax content without reload*/ $(window).bind("popstate", function() { $.ajax({url:location.pathname,success: function(data){ $("#content").html(data); }}); }); </script> </head> <body> <div id="menu"> <a href="test2.html" id="ab">menu1</a> </div> <div id="content"></div> </body> </html> secondpage.html
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>untitled document</title> </head> <body> <div id="content">second page</div> </body> </html>
in main page write code
<script> $('#content_holder').load('secondpage.html'); </script> javascript jquery html animation
No comments:
Post a Comment