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); this is required as I need the banner to remain fixed at the top of the page, as well as the position of the user on said page to remain the same once a new tab is selected, or at least not have the page reload. 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.
You can use multiple div to put your content in them. After that, you can hide your div with display: none;.
You can now, with Javascript, change the display of one of your div that contains your content.You can use the document.getElementById('div-1').style.display = "initial" to show one of your tab and you can use the document.getElementById('div-1').style.display = "none" to hide it.
Here is an example that I have found on Codepen.io: Example of the tab switching
function hideOtherTabs(tabList, tab, tabPrefix){
for (index = 0; index < tabList.length; index++) {
if(tabPrefix+tab!=tabPrefix+tabList[index]){
$('div#'+tabPrefix+tabList[index]).hide();
}
}
}
jQuery(document).ready( function(){
var tabPrefix = 'home_';
var tabs = ['tab1', 'tab2', 'tab3'];
for (index = 0; index < tabs.length; index++) {
jQuery('div#'+tabPrefix+tabs[index]).hide();
}
jQuery('ul.tab_links li').click( function(){
var tabID = $(this).attr('id');
//alert(tabID);
//show this tab
jQuery('div#'+tabPrefix+tabID).show();
//hide others
hideOtherTabs(tabs,tabID,tabPrefix);
});
});.tab_links {}
.tab_links li {
font-family: 'Source Sans Pro', sans-serif;
cursor: pointer;
list-style: none;
float: left;
margin-right: 3px;
padding: 10px 40px;
background: #B326DA;
color: #ffffff;
}
.tab_links li:hover {
background: #D746FF;
}
.tab_box{
min-height: 200px;
width:335px;
margin: 10px 0 5px 40px;
border:1px dashed #B326DA;
padding:10px;
font-family: 'Source Sans Pro', sans-serif;
color: #B326DA;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
<ul class='tab_links'>
<li id='tab1'>Tab 1</li>
<li id='tab2'>Tab 2</li>
<li id='tab3'>Tab 3</li>
</ul>
<div style='clear:both;'></div>
<div class='tab_box' id='home_tab1'>
Crazy world tab1
</div>
<div class='tab_box' id='home_tab2'>
Hello world tab2
</div>
<div class='tab_box' id='home_tab3'>
Bye world tab3
</div>