Home/ Questions/Q 7644895
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T09:47:58+00:00

I am studying html, css, javascript and jquery in a very basic level yet,

  • 0

I am studying html, css, javascript and jquery in a very basic level yet, and plan to use these technologies for personal projects, prototyping, etc. (NOT for professional web development/design).

I want to have a page with tabbed content, where each tab’s content would come from a different html file (I want this because then I can manage each file individually).

I have seen CSS-only tabbed layout, JS-only tabbed layout, JQueryUI tabs, and any combination in between.

Since tabs are now commonplace in every site, I was wondering there would be a “right” way to do it, but I’m confused.

So, the question is: what is the “canonical” way to do a simple tabbed layout on a page, where each tab would be a “wrapper” to a separate html file to be diplayed inside?

Thanks for any answers!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Obviously, there are many ways to achieve your goal. Some people include a fully fledged framework like jQuery(UI) for this (which is in my opinion overkill, because you don’t need such a gigantic framework for this), while others create a really simple script that’s really hard to extend. Simply put, there are basically two ways to do this (with clearly many roads in between):

    1. Use a server side scripting language. If you want to store every tab in a different HTML file, you will need a new request for every tab change anyways, so then it’s not a big step to just managing the tabs using a server side scripting language, like PHP. You could just check for a $_GET variable and include a different file depending on the value. This is really easy. However, it’s not possible to have animations;

    2. This methods is, you could say, web 2.0-style; because you can have animations with this method. You should create a nice tabbed layout using CSS and then use Javascript for the tab switching. Yes, there are ways to do that using pure CSS, but that won’t work in many browsers, so you’ll have to use Javascript anyways.

      Then, there are two ways to load the actual content. You can use Javascript to load the content using an AJAX request when the user clicks a tab. However, this will mean that there could be some loading time on slower internet connections. Therefore, I personally prefer to load all content using a PHP include on the server side. That makes it really easy to manage the files, while still having the advantages of one file.

    In this answer I’ve assumed you at least know a little bit about PHP, if that’s not the case: please ask. Hope I helped. 🙂

    • 0