An example is here. The website is written in html and the tabs are created from javascript. As you can see from the source code, the content under each "tabcontent" class is getting a little long for all tabs to be written in one bulk file.
https://lwymarie.github.io/
I wonder if there’s a minimalist way to put tab contents in separate files that are named e.g. tab1.html, tab2.html, and then include or link these "module" files in the index.html main file.
I note that a similar question has been asked in stackoverflow, linked below, however it seems the discussion has gone into a different direction.
HTML tabs with content in separate files
I found solutions on stackoverflow that invoke jquery or php, but those solutions don’t seem to directly address the presence of javascript created tabs.
Alternatively, in case that the better writing practice is actually not to "modulize" but have a single html file, please comment on that too.
>Solution :
HTML imports don’t exist so you broadly have three options:
-
Move each tab to a different file. Link between these HTML files from the navigation. The immediate con of this is (without some more work) you are copy pasting any changes to your navigation or global structure across several files.
-
Move everything to different files but use frames (or iframes) to load in things like the navigation. You’ll have to be clever with your targeting of these links, or they will just affect the frame contents (
target="_parent"). -
Keep a single HTML file, and import your data in each tab from some JS files. This will quickly become very tricky as you try to effectively replicate JSX, a language for creating HTML templates inside javascript.
This requirement gets very close to being fulfilled more easily by something like NextJS, a modern framework which makes it quite easy to build and deploy small sites like this. Each file would be separate page, but you could import global styles and layout across them. If you have the patience to look into this check out the NextJS tutorial which builds something very similar.