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 >
  <div >
    <div >
      <input type="radio" name="css-tabs" id="tab-1" checked >
      <label for="tab-1" >Tab One</label>
      <div >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.

CodePudding user response：

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>