Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is it possible to have tabs without javascript

Tags:

javascript

css

I'm trying to have a box with tabs, and have found many tutorials on how it's done with javascript to switch between the tabs. Is there anyway to have tabs without javascript?

like image 847
sameold Avatar asked Aug 02 '11 02:08

sameold


People also ask

How do I create a tab in HTML?

The tab character can be inserted by holding the Alt and pressing 0 and 9 together.

Does HTML need tabs?

Unfortunately, HTML parsers will simply collapse it into a single space due to the whitespace collapse principle. There used to be a special tab element. However, it became obsolete in HTML3 more than two decades ago, and even then browsers didn't support it universally.

What is a tab in JavaScript?

The [JavaScript Tab] is a content panel to show multiple contents in a specific space, one at a time.


2 Answers

EDIT: As of 2020 this technique still works and allows tabs to be linked to, but if you are looking for multiple tabsets on one page, see @chulian's answer which uses input[type=radio] instead of :target.

There is an archive of the now-dead html5rockstars.com demo here: https://web.archive.org/web/20121118201357/http://htmlrockstars.com/blog/using-css-to-create-a-tabbed-content-area-no-js-required/

The same technique is covered, arguably better, here: http://www.sitepoint.com/css3-tabs-using-target-selector/

What it boils down to is that you use the CSS3 :target selector to unhide whichever tab is currently selected. This will only work if there is only one set of tabs on the page, but has the advantage of complete browser back button support. For example:

<ul id="menu">
    <li><a href="#tab1">First tab</a></li>
    <li><a href="#tab2">Second tab</a></li>
    <li><a href="#tab3">Third tab</a></li>
</ul>
<div id="tab1" class="tab-content">Content of first tab</div>
<div id="tab2" class="tab-content">Content of second tab</div>
<div id="tab3" class="tab-content">Content of third tab</div>

And then in your stylesheet:

.tab-content {
    display: none;
}
.tab-content:target {
    display: block;
}

Unfortunately this isn't perfect, as no tab content will show up until one of the links is clicked (unless you link to page.html#tab1). The second link above suggests something like the following as a solution to that issue:

.tab-content {
    z-index: 0;
    background-color: white;
    position: absolute;
    top: 100px;
    width: 100%;
    height: 300px;
}
.tab-content:first-child {
    z-index: 1;
}
.tab-content:target {
    z-index: 2;
}

This is somewhat hackish, and also requires absolute positioning.

As an alternative, if you do not mind having your default tab be last in the html (you can order the links however you like, of course), you could do this:

<ul id="menu">
    <li><a href="#tab1">First tab</a></li>
    <li><a href="#tab2">Second tab</a></li>
    <li><a href="#tab3">Third tab</a></li>
</ul>
    <div class="tab-folder">
    <div id="tab2" class="tab-content">Content of second tab</div>
    <div id="tab3" class="tab-content">Content of third tab</div>
    <div id="tab1" class="tab-content">Content of first tab</div>
</div>

CSS:

.tab-folder > .tab-content:target ~ .tab-content:last-child, .tab-folder > .tab-content {
    display: none;
}
.tab-folder > :last-child, .tab-folder > .tab-content:target {
    display: block;
}

This is arguably the cleanest solution and the one that I would choose over the others, unless I suspected that many people would be visiting my page with CSS turned off.

like image 157
krispy Avatar answered Oct 15 '22 00:10

krispy


Found this one, hope it solves your question

http://css-tricks.com/functional-css-tabs-revisited/

demo: http://css-tricks.com/examples/CSSTabs/radio.php

<div class="tabs">

   <div class="tab">
       <input type="radio" id="tab-1" name="tab-group-1" checked>
       <label for="tab-1">Tab One</label>

       <div class="content">
           stuff
       </div> 
   </div>

   <div class="tab">
       <input type="radio" id="tab-2" name="tab-group-1">
       <label for="tab-2">Tab Two</label>

       <div class="content">
           stuff
       </div> 
   </div>

    <div class="tab">
       <input type="radio" id="tab-3" name="tab-group-1">
       <label for="tab-3">Tab Three</label>

       <div class="content">
           stuff
       </div> 
   </div>

</div>

css

.tabs {
  position: relative;   
  min-height: 200px; /* This part sucks */
  clear: both;
  margin: 25px 0;
}
.tab {
  float: left;
}
.tab label {
  background: #eee; 
  padding: 10px; 
  border: 1px solid #ccc; 
  margin-left: -1px; 
  position: relative;
  left: 1px; 
}
.tab [type=radio] {
  display: none;   
}
.content {
  position: absolute;
  top: 28px;
  left: 0;
  background: white;
  right: 0;
  bottom: 0;
  padding: 20px;
  border: 1px solid #ccc; 
}
[type=radio]:checked ~ label {
  background: white;
  border-bottom: 1px solid white;
  z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
  z-index: 1;
}
like image 13
chulian Avatar answered Oct 15 '22 00:10

chulian