External HTML or a Hidden content

The question might be silly but is the first time I am touching some HTML and CSS in my life so here it goes.Basically I am trying to find out how I can keep the same throughout the whole website, it was apparently easy and it's probably easy but I am kind of struggling with that and I am gonna tell you why!I have got 3 main pages 1 2 3, a nav with link to each page 1, 2, 3 and also a few fullscreen slides that would be shown by itself when called by the thumb.(shown by its own out of the main pages) What I was going to do was get one html per each slide, so when clicking on the thumb it brings the slide through its URL, on "slide1.html" for example, I've placed the same from my main pages but now targeting the href with the URL of the page however it did not work as I have only one URL for my three main pages I also assume that is not a way to make it.I had a look in some websites but I am not entirely sure if it'll suit what I want. Would an external html be the a good solution? http://api.jquery.com/load/\[code\] <nav> <ol> <li><a href="http://stackoverflow.com/questions/13774751/#page1">Page 1</a></li> <li><a href="http://stackoverflow.com/questions/13774751/#page2">Page 2</a></li> <li><a href="http://stackoverflow.com/questions/13774751/#page3">Page 3</a></li> </ol> </nav>\[/code\] Page 1 #\[code\]<div id="page2"> <p>Page 2</p> <li class="thumb"> <a href="http://stackoverflow.com/questions/13774751/url-slide1">Thumb 1</a> </li> <li class="thumb"> <a href="http://stackoverflow.com/questions/13774751/url-slide2">Thumb 2</a> </li> <li class="thumb"> <a href="http://stackoverflow.com/questions/13774751/url-slide3">Thumb 3</a> </li></div><div id="page3"> <p>Page 3</p></div>\[/code\]I am wondering if there is a way to have all the slides hidden within the page2, so I would call the div from the same html file what would be way easier.\[code\] <nav> <ol> <li><a href="http://stackoverflow.com/questions/13774751/#page1">Page 1</a></li> <li><a href="http://stackoverflow.com/questions/13774751/#page2">Page 2</a></li> <li><a href="http://stackoverflow.com/questions/13774751/#page3">Page 3</a></li> </ol> </nav> <div id="page1"> <p>Page 1</p> </div># <div id="page2"> <p>Page 2</p> <li class="thumb"> <a href="http://stackoverflow.com/questions/13774751/#slides1">Thumb 1</a> </li> <li class="thumb"> <a href="http://stackoverflow.com/questions/13774751/#slides2">Thumb 2</a> </li> <li class="thumb"> <a href="http://stackoverflow.com/questions/13774751/#slides3">Thumb 3</a> </li></div><div id=slidesWraper> <div id=slides1"><div> <div id=slides2"><div> <div id=slides3"><div></div><div id="page3"> <p>Page 3</p></div>\[/code\]I hope the link helps http://jsfiddle.net/marco_desi/fJ2yv/ not quite sure.Thank you very much in advance.
 
Back
Top