Is it possible to have tabs without javascript

Question

I am trying to create a tabbed window and found many tutorials on how to do this with javascript to switch between tabs. Anyway, are there tabs without javascript?

Answer 1

The html5rockstars.com demo archive is here: https://web.archive.org/web/20121118201357/http://htmlrockstars.com/blog/using-css-to-create-a-tabbed. - cross-zone-no-JS-required /

The same method is described, perhaps better, here: http://www.sitepoint.com/css3-tabs-using-target-selector/

It all comes down to using the CSS3 :target selector :target to show which tab is currently selected. This will only work if the page has only one set of tabs, but has the advantage of fully supporting the back button of the browser. For instance:

 <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 is not ideal, since the contents of the tab will not be displayed until one of the links is clicked (unless you are page.html#tab1 on page.html#tab1 ). The second link above offers something like the following as a solution to this problem:

 .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 hacky, and also requires absolute positioning.

Alternatively, if you don't mind your default tab being the last in html (you can arrange the links as you like, of course), you can 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; } 

Perhaps this is the cleanest solution that I would choose among others, unless I suspected that many people would visit my page with CSS disabled.

Answer 2

Found this one, hope it resolves your issue

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; } 

Answer 3

Find CSS tabs or go here:

http://unraveled.com/publications/css_tabs/

EDIT: I am the author of these tabs. They were once a great example of CSS in practice, but they have become very outdated. I recommend using more modern structures like Bootstrap or Foundation. - Joshua Kaufman