Developing a website using Django (irrelevant, really), and have been toying with the implementation of tabs versus a navbar, as I want certain pages to update when selected without completely redirecting to a new page, or refreshing it entirely. For this to be useful, however, each tab would require its own format of CSS, as each page that’s being displayed is inherently different from every other (lets say there are 4 tabs, each tab would display completely different page, ranging from an image library to just text); my question is, how would this theoretically be done, as I have found very little documentation on the matter, other than people claiming “its possible” when asked.
<div class="wrapper">
<div class="tabs">
<div class="tab">
<input type="radio" name="css-tabs" id="tab-1" checked class="tab-switch">
<label for="tab-1" class="tab-label">Tab One</label>
<div class="tab-content">sample text</div>
</div>
Based on the input above, I would assume you could list multiple entries and modify each one using the id=”tab-1″ modifier within CSS, something similar to .tab-1, .tab-2, .tab-3, to update each selection individually, however, this does not seem to work when attempted. I have also attempted to incorporate separate CSS files, which would be the optimal result, however, they do not seem to load properly when incorporated, and I have found little documentation on implementing multiple CSS files in the way that is required for differential tabs.
(Alternatively, is there a way to obtain this format using a navbar, whereas instead of a link to a separate page, it displays the change within the body, similar to a tab modifying its container; ultimately, I want the display to be similar to that of a navbar.)
Thanks for your help.