html - Load page content of link in div when clicked -



html - Load page content of link in div when clicked -

hoping assist me issue, have created jsfiddle code explains im needing

http://jsfiddle.net/pnl1d663/3/

-

i have created basic code of site header, nav menu 6 links, main div , right sidebar,

what looking accomplish when user clicks 1 of 6 page links on nav menu (ie clicks page4.html),

the content page link clicked (i.e. page4.html),is loaded main div without rest of page( i.e. header,nav, rightsidebar), refreshing @ all.

that div should remain showing content (ie. page4.html), until user clicks link (i.e. page6.html),

then content in main div should alter (ie. page4.html page 6.html) without other content reloading/refreshing on page

-

hopefully have been able create clear plenty of im needing do.

thank you.

code:

<body> <div class="container"> <div class="header">site name</div> <div class="nav"> <ul> <li><a href="#">page1.html</a> </li> <li><a href="#">page2.html</a> </li> <li><a href="#">page3.html</a> </li> <li><a href="#">page4.html</a> </li> <li><a href="#">page5.html</a> </li> <li><a href="#">page6.html</a> </li> </ul> </div> <div class="main">this main div load either page1.html -> page6.html depending on nav link user clicks.. note when user clicks nav link.. div should reload content of said clicked page. i.e. if user clicks page4.html link in nva menu. lightblue div alter whats written here , load content page4.html in div header, nav, , rightsidebar of page remain static , not refresh @ all.</div> <div class="rightsidebar">blah blah blah blah blah</div> </div>

css:

.header { text-align:center; width: 100%; height: 90px; } .nav { float:left; width:20%; height: 500px; background:grey; } .main { float:left; width:60%; height: 500px; background:lightblue; } .rightsidebar { float:right; width:20%; height: 500px; background:lightgreen; }

one alternative utilize jquery's load function. give navigation anchors unique id's, , there can utilize code similar this:

$(function () { $("#nav_page_a").on("click", function () { $("#main").load("pagea.html"); }); $("#nav_page_b").on("click", function () { $("#main").load("pageb.html"); }); });

have @ this: http://api.jquery.com/load/

html css anchor webpage

Comments

Post a Comment

Popular posts from this blog

c - Compilation of a code: unkown type name string -

c - Compilation of a code: unkown type name string - i have next lines of code compiler says following: "unknown type name 'string'" both in declaration , definition of function. can tell me what's wrong? thanks. #include <stdio.h> #include <stdlib.h> #include <string.h> void frecognizeclient(string *actualclient) there no string type in c. need utilize array so: char array[10]; then can pass in function: void frecognizeclient(char *actualclient); c arrays string compilation
Read more

java - Bypassing "final local variable defined in an enclosing type" -

java - Bypassing "final local variable defined in an enclosing type" - i'm writing programme , i'm getting "the final local variable asd cannot assigned, since it's defined in enclosing type". i provide illustration not code produces error aswell. have arraylist utilize later (if define within button can't utilize later on), outside of button, pressing button should give values arraylist. in illustration "create new arraylist" cause same problem. button btn = new button("asd"); final arraylist asd = new arraylist(); btn.setonaction(new eventhandler<actionevent>() { public void handle(final actionevent event) { asd = new arraylist(); //here's error.. } }); clear arraylist , add together values. java javafx
Read more

json - Hibernate and Jackson (java.lang.IllegalStateException: Cannot call sendError() after the response has been committed) -

json - Hibernate and Jackson (java.lang.IllegalStateException: Cannot call sendError() after the response has been committed) - hello have problem hibernate , jackson. have 2 pojos @entity @table(name = "users") public class user implements serializable { static final long serialversionuid = 4235637833262722256l; @id @generatedvalue private int id; @column(name = "creation_date") private date creationdate; @column(name = "first_name") private string firstname; @column(name = "last_name") private string lastname; @version @column(name = "version") private int version; @column(name = "e_mail") private string email; @column(name = "enabled") private boolean enabled; @column(name = "login") private string login; @column(name = "password") private string password; @jsonmanagedreference("role") @onetomany(mappedby = "user", cascade = cascadetype.all,fetch = fetchtyp...
Read more