Tabs and Subtabs in CSS, active tab background color change-CodePudding

I have some tabs and each tabs have sub-tabs. Its working fine, but i would like to know currently which tab or sub-tab is active, accordingly the background color has to be changed so as to know this tab or sub-tab is active. This is the script below:

    {https://codepen.io/Cactical-Jinx/pen/GRqrmOE}

CodePudding user response：

You'd need javascript. Because there is no direct "css" connection between the 2 elements (the radio and it's label). The only connection is by the attribute for and the id so we utilize this to find the relevant label from the click event of the input. By the way the idea behind this css only tabs is quite clever. Only downside it needs some javascript after all.

document.querySelectorAll(".tab-radio").forEach(function(checkbox) {

  checkbox.addEventListener("click", function(ev) {
    var id = this.id;
    var label = document.querySelector('[for="' id '"]');
    var container = label.closest(".top-tabs-container, .sub-tabs-container");
    container.querySelectorAll("label").forEach(function (label) {
      label.classList.remove("active");
    })
    
    label.classList.add("active")
    
  })
})

/* FONT */

@import url("https://fonts.googleapis.com/css?family=Lato");

/* Please note, it's not quite meant to look pretty.
Hopefully the use of colours would make it easier to see what's going on and edit to your liking! */


/* ONGOING: For better UX, finding solution to have styling on selected tabs*/


/* General */

body {
  width: 90%;
  margin: 10px auto;
  background-color: #ecf0f1;
  font-family: Lato, sans-serif;
  letter-spacing: 1px;
}

*,
*:hover {
  transition: all 0.3s;
}


/* Main Tabs */

label {
  background-color: #1b2e3c;
  color: #ffffff;
  display: inline-block;
  cursor: pointer;
  padding: 10px;
  font-size: 14px;
}

label:hover {
  background-color: #2e536e;
}


/* Just to give indication that it's being clicked */

label:active {
  color: #dce775;
}

.tab-radio {
  display: none;
}


/* Tabs behaviour, hidden if not checked/clicked */

.sub-tab-content,
.tab-content {
  display: none;
}

.tab-radio:checked .tab-content,
.tab-radio:checked .sub-tab-content {
  display: block;
}

.tab-radio:checked {
  border: 2px solid yellow;
}


/* Sub-tabs */

.sub-tabs-container label {
  color: #030700;
  min-width: 150px;
  text-align: center;
  background-color: #ff8a65;
  box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.3);
}

.sub-tabs-container label:active {
  color: #37474f;
  box-shadow: 2px 1px 1px rgba(0, 0, 0, 0.3);
}

.sub-tabs-container label:first-child {
  background-color: #cddc39;
}

.sub-tabs-container label:hover {
  background-color: #ffccbc;
}

.sub-tabs-container label:first-child:hover {
  background-color: #e6ee9c;
}


/* Tabs Content */

.tab-content {
  padding: 10px;
  background-color: #ffffff;
  border: 1px solid #ddd;
  box-shadow: 2px 10px 6px -3px rgba(0, 0, 0, 0.5);
}

label.active {
  border: 2px solid red;
}

<section>
  <div >
    <label for="main-tab-1">Generated Tab 0</label>
    <label for="main-tab-2">Generated Tab 1</label>
    <label for="main-tab-3">Generated Tab 2</label>
    <label for="main-tab-4">Generated Tab 3</label>
    <label for="main-tab-5">Generated Tab 4</label>
  </div>

  <!-- Tab Container 1 -->
  <input  id="main-tab-1" name="main-group" type="radio" checked="checked" />
  <div >
    <div >
      <label for="sub-tab-1">Sub-Tab 1</label>
      <label for="sub-tab-2">Sub-Tab 2</label>
    </div>
    <!-- Sub Tab -->
    <input  id="sub-tab-1" name="sub-group" type="radio" checked="checked">
    <div >
      <h1>Sub-Tab 1</h1>
      <p>Sub-Tab content will go here! </p>
      <ul>
        <li>This is just a test</li>
        <li>CSS only... so far</li>
        <li>Barely any hackery</li>
        <li>Kind of verbose, HTML-wise...</li>
      </ul>
    </div>
    <!-- Sub Tab -->
    <input  id="sub-tab-2" name="sub-group" type="radio">
    <div >
      <h1>Sub-Tab 2</h1>
      <p>Sub-Tab content will go here!</p>
      <ul>
        <li>Another list</li>
        <li>With some items</li>
        <li>Make it short</li>
        <li>And sweet</li>
      </ul>
    </div>
  </div>

  <!-- Tab Container 2 -->
  <input  id="main-tab-2" name="main-group" type="radio" />
  <div >
    <div >
      <!-- NOTE: due to id note below, remember to match the for.
    The actual title doesn't matter, just to show it works... -->
      <label for="sub-tab2-1">Sub-Tab 3</label>
      <label for="sub-tab2-2">Sub-Tab 4</label>
    </div>
    <!-- Sub Tab -->
    <!-- NOTE: name="sub-group" will require to be unique to the tab, 
          ie: tab2 = sub-group2, tab3 = sub-group 3 etc. -->
    <!-- NOTE: id have to be unique. So for each sub tabs, the input id will have to change -->
    <input  id="sub-tab2-1" name="sub-group2" type="radio" checked="checked">
    <div >
      <h1>Sub-Tab 3</h1>
      <p>Sub-Tab content will go here! </p>
      <ul>
        <li>No JavaScript</li>
        <li>100% Healthy, Plain CSS</li>
        <li>Barely any hackery</li>
        <li>Kind of verbose, HTML-wise...</li>
      </ul>
    </div>
    <!-- Sub Tab -->
    <input  id="sub-tab2-2" name="sub-group2" type="radio">
    <div >
      <h1>Sub-Tab 4</h1>
      <p>Different Content goes here</p>
      <ul>
        <li>Another list</li>
        <li>With some items</li>
        <li>Make it short</li>
        <li>And sweet</li>
      </ul>
    </div>
  </div>

  <!-- Tab Container 3 -->
  <input  id="main-tab-3" name="main-group" type="radio" />
  <div >
    <div >
      <!-- NOTE: due to id note below, remember to match the for-->
      <label for="sub-tab3-1">Sub-Tab 5</label>
      <label for="sub-tab3-2">Sub-Tab 6</label>
    </div>
    <!-- Sub Tab -->
    <input  id="sub-tab3-1" name="sub-group3" type="radio" checked="checked">
    <div >
      <h1>Sub-Tab 5</h1>
      <p>Sub-Tab content will go here! </p>
      <ul>
        <li>No JavaScript</li>
        <li>100% Healthy, Plain CSS</li>
        <li>Barely any hackery</li>
        <li>Kind of verbose, HTML-wise...</li>
      </ul>
    </div>
    <!-- Sub Tab -->
    <input  id="sub-tab3-2" name="sub-group3" type="radio">
    <div >
      <h1>Sub-Tab 6</h1>
      <p>Different Content goes here</p>
      <ul>
        <li>Another list</li>
        <li>With some items</li>
        <li>Make it short</li>
        <li>And sweet</li>
      </ul>
    </div>
  </div>

  <!-- Tab Container 4 -->
  <input  id="main-tab-4" name="main-group" type="radio" />
  <div >
    <div >
      <!-- NOTE: due to id note below, remember to match the for-->
      <label for="sub-tab4-1">Sub-Tab 7</label>
      <label for="sub-tab4-2">Sub-Tab 8</label>
    </div>
    <!-- Sub Tab -->
    <input  id="sub-tab4-1" name="sub-group4" type="radio" checked="checked">
    <div >
      <h1>Sub-Tab 7</h1>
      <p>Sub-Tab content will go here! </p>
      <ul>
        <li>No JavaScript</li>
        <li>100% Healthy, Plain CSS</li>
        <li>Barely any hackery</li>
        <li>Kind of verbose, HTML-wise...</li>
      </ul>
    </div>
    <!-- Sub Tab -->
    <input  id="sub-tab4-2" name="sub-group4" type="radio">
    <div >
      <h1>Sub-Tab 8</h1>
      <p>Different Content goes here</p>
      <ul>
        <li>Another list</li>
        <li>With some items</li>
        <li>Make it short</li>
        <li>And sweet</li>
      </ul>
    </div>
  </div>

  <!-- Tab Container 5 -->
  <input  id="main-tab-5" name="main-group" type="radio" />
  <div >
    <div >
      <!-- NOTE: due to id note below, remember to match the for-->
      <label for="sub-tab5-1">Sub-Tab 9</label>
      <label for="sub-tab5-2">Sub-Tab 10</label>
    </div>
    <!-- Sub Tab -->
    <input  id="sub-tab5-1" name="sub-group5" type="radio" checked="checked">
    <div >
      <h1>Sub-Tab 9</h1>
      <p>Sub-Tab content will go here! </p>
      <ul>
        <li>No JavaScript</li>
        <li>100% Healthy, Plain CSS</li>
        <li>Barely any hackery</li>
        <li>Kind of verbose, HTML-wise...</li>
      </ul>
    </div>
    <!-- Sub Tab -->
    <input  id="sub-tab5-2" name="sub-group5" type="radio">
    <div >
      <h1>Sub-Tab 10</h1>
      <p>Different Content goes here</p>
      <ul>
        <li>Another list</li>
        <li>With some items</li>
        <li>Make it short</li>
        <li>And sweet</li>
      </ul>
    </div>
  </div>
</section>