I currently use the jQuery tabs plugin for displaying a static website I am working on. Since it's small, I initially just put the four pages together on one page and let the tabs plugin do its work as scheduled. Now, it's getting bigger and loading more and more, therefore making the whole experience slower to load. I already know that the tabs plugin can load external pages via AJAX, which just loads the pages from regular anchor links within the tabs.
So, here's my problem. To have the pages external, I would pretty much just cut-and-paste the contents of that tab into a new HTML file and have it load externally. But how should I have it degrade? Having JS disabled is a distinct possibility with this website (running off a CD + MSIE), so I should ideally have the pages link to each other with identical headers/footers as the website originally was. However, taking this approach would have multiple headers and footers. How should I go about this? For a more visual approach, check out the following: Old Site: |__ index.html |__ page1.html |__ page2.html |__ page3.html |__ page4.html All five pages have duplicated headers and footers, save for the tab bar which has static "selected" classes. They link to each of the other four pages. New Site: (Bulgy, slow) |__ index.html -|------ Header -|------ Tabs -|------ Contents of home -|------ Contents of page 1 (hidden by JS on default) -|------ Contents of page 2 (hidden by JS on default) -|------ Contents of page 3 (hidden by JS on default) -|------ Contents of page 4 (hidden by JS on default) -|------ Footer New ideas: (Fast, speedy, and good-looking) |__ index.html -|------ Header -|------ Tabs, links to pages -|------ Contents of home -|------ DIV container, loads others |__ page1.html |__ page2.html |__ page3.html |__ page4.html -|------ Footer
