Pure CSS tab containers active tab

Question

I've got a problem. I have a pure CSS tab container. But when I click on a tab, it should become active in some way.

I already tried it with a <input type="radio" /> and a <label for="foo"> But then the anchor <a href="#tabX"></a> does not work anymore.

Any ideas?

JSFIDDLE

Answer 1

I took @Asons answer and expanded it into a complete mini-site, with the CSS-only tab solution using IDs in the URL, then added jump links that work within each tab’s content with JavaScript and the HTML data- attribute. This is necessary because the CSS tab solutions already uses IDs, so we then need JavaScript to keep the current tab in view and jump to the in-tab content.

Here's the result on GitHub: CSS-only tabs with optional JavaScript jump links within each tab’s content. Using naming/numbering conventions I've written the code to be scalable (as many or few tabs as you need, etc.).

You can also see these CSS tabs working here on GitHub pages.

Answer 2

For those who want a script version, I've just edited the source code as the snippet and added some jQuery functions.

$(document).ready(function(){
  var currentTab = $("#buttonTab1")
  
  $("#buttonTab1").click(function(){
    currentTab.removeClass();
    currentTab = $(this);
  	$(this).addClass("tab1")
  });
  
	$("#buttonTab2").click(function(){
    currentTab.removeClass();
    currentTab = $(this);
  	$(this).addClass("tab2")
  });
  
  $("#buttonTab3").click(function(){
    currentTab.removeClass();
    currentTab = $(this);
  	$(this).addClass("tab3")
  });
  
  $("#buttonTab4").click(function(){
    currentTab.removeClass();
    currentTab = $(this);
  	$(this).addClass("tab4")
  });

});

ul {
  margin: 0;
  padding: 0;
  width: 100%;
  display: inline-block;  
}
ul li {
  list-style: none;
  float: left;
  background: #333;    
}
ul li a {
   color: #FFF;
   display: block;
   padding: 10px;
   text-decoration: none;
}
.tabcontainer {
  width: 100%;  
}
.tab:not(:first-child) {
  display: none;
}
.tab {
  position: absolute;  
}  
.tab:target {
  display: block;
}
.tab1 {
  background: #638DB2;
}
.tab2 {
  background: #FF4C43;
}
.tab3 {
  background: #C1CC14;
}
.tab4 {
  background: #ADB257;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a id="buttonTab1" class = "tab1" href="#tab1">Tab 1</a></li>
  <li><a id="buttonTab2" href="#tab2">Tab 2</a></li>
  <li><a id="buttonTab3" href="#tab3">Tab 3</a></li>
  <li><a id="buttonTab4" href="#tab4">Tab 4</a></li>
</ul>
<div class="tabcontainer">
  <div id="tab1" class="tab tab1">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  <div id="tab2" class="tab tab2">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  <div id="tab3" class="tab tab3">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  <div id="tab4" class="tab tab4">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>

Answer 3

Since you already using hash # you can use make use of the pseudo class :target.

To show how this works I added extra span to be able to target both the anchor a and the div.

The main 3 things that make this work is the span, the :target ~ ... and #tab1:target ~ ... rules.

1. Having the span placed before we can use the sibling selector to target 1 or more elements with only 1 hash.
2. With the :target ~ ... rule we reset the initilly showed tab and its content when a hash exist
3. Finally we use each #tab1:target ~ ... rule to mark the selected tab and show its content

Also see comment in CSS, which explain the steps used.

ul {
  margin: 0;
  padding: 0;
  width: 100%;
  display: inline-block;
}
ul li {
  list-style: none;
  float: left;
}
ul li a {
  color: #FFF;
  background: #333;
  display: block;
  padding: 10px;
  text-decoration: none;
}
.hideme {
  display: none;
}

.tabcontainer {
  width: 100%;
}
.tabcontainer .tab {
  position: absolute;
  display: none;
}

/* set the first link's background and show its div on page load */
ul li:first-child a,
.tab:first-child {
  background: #638DB2;
  display: block;
}

/* reset the first link's background and hide its div when a hash tag exist */
:target ~ ul [href="#tab1"] {
  background: black;
}
:target ~ .tabcontainer #tab1div {
  display: none;
}

/* set the hashed/targeted link's background and show its div */
#tab1:target ~ ul [href="#tab1"],
#tab1:target ~ .tabcontainer #tab1div {
  background: #638DB2;
  display: block;
}
#tab2:target ~ ul [href="#tab2"],
#tab2:target ~ .tabcontainer #tab2div {
  background: #FF4C43;
  display: block;
}
#tab3:target ~ ul [href="#tab3"],
#tab3:target ~ .tabcontainer #tab3div {
  background: #C1CC14;
  display: block;
}
#tab4:target ~ ul [href="#tab4"],
#tab4:target ~ .tabcontainer #tab4div {
  background: #ADB257;
  display: block;
}

<span id="tab1" class="hideme"></span>
<span id="tab2" class="hideme"></span>
<span id="tab3" class="hideme"></span>
<span id="tab4" class="hideme"></span>
<ul>
  <li><a href="#tab1">Tab 1</a></li>
  <li><a href="#tab2">Tab 2</a></li>
  <li><a href="#tab3">Tab 3</a></li>
  <li><a href="#tab4">Tab 4</a></li>
</ul>
<div class="tabcontainer">
  <div id="tab1div" class="tab">
    1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  <div id="tab2div" class="tab">
    2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  <div id="tab3div" class="tab">
    3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  <div id="tab4div" class="tab">
    4 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>