Trying to anchor link to tabs. How to have a link jump to an input anchor and mark it as checked?

user_5896538 0
Viewed 1416

Ideally this would be done with HTML/CSS only, but I understand if that's not feasible.

I'm using tabbed windows on my page like this. This is (currently) commonly done by having each tab be an input that can be "checked".

<input checked="checked" type="radio" id="tab 1">

Now on my page, I also have a table of contents at the top which points down to an anchor.

So suppose I have something like this:

<li>
  <input checked="checked" type="radio" id="tab1">
  <label class="tab1-label">Tab 1</label>
  <div id="tab1-content">
    <p>This is the content of tab 1.</p>
  </div>
</li>

<li>
  <input type="radio" id="tab2">
  <label class="tab2-label">Tab 2</label>
  <div id="tab2-content">
    <p>This is the content of tab 2.</p>
  </div>
</li>

<li>
  <input type="radio" id="tab3">
  <label class="tab3-label">Tab 3</label>
  <div id="tab3-content">
    <p>This is the content of tab 3.</p>
  </div>
</li>

Is there a way for me to link from my table of contents at the top of this page and jump down to the tab and activate it (mark it checked) in the process? I'd imagine something like this:

<a href="#tab2-anchor">Link to Tab 2</a>

could jump to this:

<a name="tab2-anchor"><input type="radio" id="tab2"></a>

But how would it toggle the input as checked? Perhaps some javascript might be required to add/remove this. So from this:

<input checked="checked" type="radio" id="tab1">    
<input type="radio" id="tab2">
<input type="radio" id="tab3">

To this:

<input type="radio" id="tab1">    
<input checked="checked" type="radio" id="tab2">
<input type="radio" id="tab3">

I'm also open to the idea of using something other than input/radio to build these tabs if that would make linking to said tabs easier.

Here is a working codepen and the functional code below which has working tabs, but linking and toggling to them isn't added. Please note: I attempted to clean it up but I apologize for any mess as this is stitched together and in development at the moment.

/* Component Needs */

.pc-tab input,
.pc-tab .tab_content > div {
  display: none;
}

#tab1:checked ~ .tab_container .tab1,
#tab2:checked ~ .tab_container .tab2,
#tab3:checked ~ .tab_container .tab3,
#tab4:checked ~ .tab_container .tab4{
  display: block;
}

#tab1:checked ~ .tabs nav .tab1,
#tab2:checked ~ .tabs nav .tab2,
#tab3:checked ~ .tabs nav .tab3,
#tab4:checked ~ .tabs nav .tab4{
  color: orange;
}

/* Visual Styles */

$activeColor: transparent; /* #ffffff */
$unactiveColor: #eeeeee;
$unactiveHoverColor: red; /* #dddddd */
$offsetHeight: 50px;


*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.tab_content div {
  box-sizing: border-box;
  }

body {
  background: #ecf0f1;
}

h1 {
  text-align: center;
  font-weight: 100;
  font-size: 60px;
  color: #e74c3c;
}

.pc-tab { 
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  }
  
.pc-tab .tabs ul {
  list-style: none;
  margin: 0;
  padding: 0;
  }
  
.pc-tab .tabs ul li label {  
  font-family: "Raleway";
  float: left;
  padding: 15px 25px;
  border: 1px solid #ddd;
  border-bottom: 0;
  background: /* $unactiveColor */ #eeeeee;
  color: #444;
  }

.pc-tab .tabs ul li label:hover {
  background: /* $unactiveHoverColor */ red;
  }

.pc-tab .tabs ul li label:active {
  background: /* $activeColor */ transparent;
  }
  
.pc-tab .tabs ul li:not(:last-child) label {
  border-right-width: 0; 
  }

.tab_content {
  font-family: "Droid Serif";
  clear: both;
  }
    
.tab_content div {
  padding-top: calc(20px + /* #{$offsetHeight} */ 50px);
  padding-right: 20px;
  padding-left: 20px;
  padding-bottom: 20px;
      
  width: 100%;
  border: 1px solid #ddd;
  /* background: #fff; */
  line-height: 1.5em;
  letter-spacing: 0.3px;
  color: #444;
  }
  
.tab_content div h2 {
  margin: 0;
  font-family: "Raleway";
  letter-spacing: 1px;
  color: #34495e;
  }

#tab1:checked ~ .tabs nav .tab1 label,
#tab2:checked ~ .tabs nav .tab2 label,
#tab3:checked ~ .tabs nav .tab3 label,
#tab4:checked ~ .tabs nav .tab4 label {
  background: transparent;
  color: #111;
  position: relative;
  }
  
#tab1:checked ~ .tabs nav .tab1 label:after,
#tab2:checked ~ .tabs nav .tab2 label:after,
#tab3:checked ~ .tabs nav .tab3 label:after,
#tab4:checked ~ .tabs nav .tab4 label:after {
  content: '';
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: $activeColor;
  left: 0;
  bottom: -1px;
  }

label {
  width: calc(100% / 4);
  box-sizing: border-box;
  text-align: center;
  height: /* $offsetHeight */ 50px;
  }

.tab_content .tab1 {
  background-color: pink;
  }

.tab_content .tab2 {
  background-color: lightblue;
  }

.tab_content .tab3 {
  background-color: lightyellow;
  }

.tab_content .tab4 {
  background-color: lightgreen;
  }

.tabs {
  height: 100%;
  display: table;
  width: 100%;
  margin-bottom: -50px; /*-$offsetHeight */
  position: relative;
  }

.tab_container {
  width: 100%;
  height: 0;
  padding-bottom: 50%;
  position: relative;
  z-index: -1;
}

.tab_content {
  position: absolute;
  height: 100%;
  width: 100%;
}

.tab_content div {
  height: 100%;
}
<div style="width: 700px; margin: 0 auto;">
  <ul>
    <li><a href="">Link to First Tab</a></li>
    <li><a href="">Link to Second Tab</a></li>
    <li><a href="">Link to Third Tab</a></li>
    <li><a href="">Link to Fourth Tab</a></li>
  </uL> 
</div>

<div style="height:300px;"></div>


<!-- 
ORIGINAL BY RENA.TO 
https://codepen.io/renatorib/pen/rlpfj
-->

<div class="pc-tab">
<input checked="checked" id="tab1" type="radio" name="pct" />
<input id="tab2" type="radio" name="pct" />
<input id="tab3" type="radio" name="pct" />
<input id="tab4" type="radio" name="pct" />  
  <div class="tabs">
  <nav>
    <ul>
      <li class="tab1">
        <label for="tab1">First Tab</label>
      </li>
      <li class="tab2">
        <label for="tab2">Second Tab</label>
      </li>
      <li class="tab3">
        <label for="tab3">Third Tab</label>
      </li>
      <li class="tab4">
        <label for="tab4">Fourth Tab</label>
      </li>
    </ul>
  </nav>
  </div> 
  
  <div class="tab_container">
  <div class="tab_content">
    
    <div class="tab1">
      <p class="title>">First</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus itaque quidem minus nostrum, voluptatem accusamus aspernatur quia harum ratione, officia laudantium inventore autem doloribus atque labore numquam non. Hic, animi.</p>
    </div>
    
    <div class="tab2">
      <p class="title>">Second</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum nesciunt ipsum dolore error repellendus officiis aliquid a, vitae reprehenderit, accusantium vero, ad. Obcaecati numquam sapiente cupiditate. Praesentium eaque, quae error!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, maiores.</p>
    </div>
    
    <div class="tab3">
      <p class="title>">Third</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
    
    <div class="tab4">
      <h2>Fourth</h2>
      <p> afdadfadfadfad Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, nobis culpa rem, vitae earum aliquid.</p>
    </div>
    
  </div>
  </div>
  
</div>
  


<div style="height:1000px;"></div>

Thank you in advance for your help.

anchor tabs css html javascript
6 Answers

You can achieve this with less javascript. Add label inside your links. And add another id to your tabs. I added id="tab1_content" for example. Then you should trigger click event on your links when clicked to label.

document.querySelectorAll("label").forEach(p => {
  p.addEventListener("click", () => {
    event.target.parentElement.click();
  });
});
/* Component Needs */

a label {
  cursor: pointer;
}

.pc-tab input,
.pc-tab .tab_content>div {
  display: none;
}

#tab1:checked~.tab_container .tab1,
#tab2:checked~.tab_container .tab2,
#tab3:checked~.tab_container .tab3,
#tab4:checked~.tab_container .tab4 {
  display: block;
}

#tab1:checked~.tabs nav .tab1,
#tab2:checked~.tabs nav .tab2,
#tab3:checked~.tabs nav .tab3,
#tab4:checked~.tabs nav .tab4 {
  color: orange;
}


/* Visual Styles */

$activeColor: transparent;

/* #ffffff */

$unactiveColor: #eeeeee;
$unactiveHoverColor: red;

/* #dddddd */

$offsetHeight: 50px;
*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.tab_content div {
  box-sizing: border-box;
}

body {
  background: #ecf0f1;
}

h1 {
  text-align: center;
  font-weight: 100;
  font-size: 60px;
  color: #e74c3c;
}

.pc-tab {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
}

.pc-tab .tabs ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pc-tab .tabs ul li label {
  font-family: "Raleway";
  float: left;
  padding: 15px 25px;
  border: 1px solid #ddd;
  border-bottom: 0;
  background: /* $unactiveColor */
  #eeeeee;
  color: #444;
}

.pc-tab .tabs ul li label:hover {
  background: /* $unactiveHoverColor */
  red;
}

.pc-tab .tabs ul li label:active {
  background: /* $activeColor */
  transparent;
}

.pc-tab .tabs ul li:not(:last-child) label {
  border-right-width: 0;
}

.tab_content {
  font-family: "Droid Serif";
  clear: both;
}

.tab_content div {
  padding-top: calc(20px +/* #{$offsetHeight} */
  50px);
  padding-right: 20px;
  padding-left: 20px;
  padding-bottom: 20px;
  width: 100%;
  border: 1px solid #ddd;
  /* background: #fff; */
  line-height: 1.5em;
  letter-spacing: 0.3px;
  color: #444;
}

.tab_content div h2 {
  margin: 0;
  font-family: "Raleway";
  letter-spacing: 1px;
  color: #34495e;
}

#tab1:checked~.tabs nav .tab1 label,
#tab2:checked~.tabs nav .tab2 label,
#tab3:checked~.tabs nav .tab3 label,
#tab4:checked~.tabs nav .tab4 label {
  background: transparent;
  color: #111;
  position: relative;
}

#tab1:checked~.tabs nav .tab1 label:after,
#tab2:checked~.tabs nav .tab2 label:after,
#tab3:checked~.tabs nav .tab3 label:after,
#tab4:checked~.tabs nav .tab4 label:after {
  content: '';
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: $activeColor;
  left: 0;
  bottom: -1px;
}

label {
  width: calc(100% / 4);
  box-sizing: border-box;
  text-align: center;
  height: /* $offsetHeight */
  50px;
}

.tab_content .tab1 {
  background-color: pink;
}

.tab_content .tab2 {
  background-color: lightblue;
}

.tab_content .tab3 {
  background-color: lightyellow;
}

.tab_content .tab4 {
  background-color: lightgreen;
}

.tabs {
  height: 100%;
  display: table;
  width: 100%;
  margin-bottom: -50px;
  /*-$offsetHeight */
  position: relative;
}

.tab_container {
  width: 100%;
  height: 0;
  padding-bottom: 50%;
  position: relative;
  z-index: -1;
}

.tab_content {
  position: absolute;
  height: 100%;
  width: 100%;
}

.tab_content div {
  height: 100%;
}
<div style="width: 700px; margin: 0 auto;">
  <ul>
    <li><a href="#tab1_content"><label for="tab1">Link to First Tab</label></a></li>
    <li><a href="#tab2_content"><label for="tab2">Link to Second Tab</label></a></li>
    <li><a href="#tab3_content"><label for="tab3">Link to Third Tab</label></a></li>
    <li><a href="#tab4_content"><label for="tab4">Link to Fourth Tab</label></a></li>
  </ul>
</div>

<div style="height:300px;"></div>


<!-- 
ORIGINAL BY RENA.TO 
https://codepen.io/renatorib/pen/rlpfj
-->

<div class="pc-tab">
  <input checked="checked" id="tab1" type="radio" name="pct" />
  <input id="tab2" type="radio" name="pct" />
  <input id="tab3" type="radio" name="pct" />
  <input id="tab4" type="radio" name="pct" />
  <div class="tabs">
    <nav>
      <ul>
        <li class="tab1">
          <label for="tab1" id="tab1_content">First Tab</label>
        </li>
        <li class="tab2">
          <label for="tab2" id="tab2_content">Second Tab</label>
        </li>
        <li class="tab3">
          <label for="tab3" id="tab3_content">Third Tab</label>
        </li>
        <li class="tab4">
          <label for="tab4" id="tab4_content">Fourth Tab</label>
        </li>
      </ul>
    </nav>
  </div>

  <div class="tab_container">
    <div class="tab_content">

      <div class="tab1">
        <p class="title>">First</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus itaque quidem minus nostrum, voluptatem accusamus aspernatur quia harum ratione, officia laudantium inventore autem doloribus atque labore numquam non. Hic, animi.</p>
      </div>

      <div class="tab2">
        <p class="title>">Second</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum nesciunt ipsum dolore error repellendus officiis aliquid a, vitae reprehenderit, accusantium vero, ad. Obcaecati numquam sapiente cupiditate. Praesentium eaque, quae error!</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, maiores.</p>
      </div>

      <div class="tab3" id="tab3_content">
        <p class="title>">Third</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>

      <div class="tab4" id="tab4_content">
        <h2>Fourth</h2>
        <p> afdadfadfadfad Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, nobis culpa rem, vitae earum aliquid.</p>
      </div>

    </div>
  </div>

</div>



<div style="height:1000px;"></div>

user_106987410

I have attached the edited HTML code to it. All I did was add each anchor tag a href attribute for their respective tab. So "Link to First Tab" will have a href = "#tab1" and "Link to Second Tab" will have href = "#tab2" and so on Check this link for the result: https://codepen.io/keidakira/pen/MWywNVx

<div style="width: 700px; margin: 0 auto;">
  <ul>
    <li><a href="#tab1">Link to First Tab</a></li>
    <li><a href="#tab2">Link to Second Tab</a></li>
    <li><a href="#tab3">Link to Third Tab</a></li>
    <li><a href="#tab4">Link to Fourth Tab</a></li>
  </uL> 
</div>

<div style="height:300px;"></div>


<!-- 
ORIGINAL BY RENA.TO 
https://codepen.io/renatorib/pen/rlpfj
-->

<div class="pc-tab">
<input checked="checked" id="tab1" type="radio" name="pct" />
<input id="tab2" type="radio" name="pct" />
<input id="tab3" type="radio" name="pct" />
<input id="tab4" type="radio" name="pct" />  
  <div class="tabs">
  <nav>
    <ul>
      <li class="tab1">
        <label for="tab1">First Tab</label>
      </li>
      <li class="tab2">
        <label for="tab2">Second Tab</label>
      </li>
      <li class="tab3">
        <label for="tab3">Third Tab</label>
      </li>
      <li class="tab4">
        <label for="tab4">Fourth Tab</label>
      </li>
    </ul>
  </nav>
  </div> 
  
  <div class="tab_container">
  <div class="tab_content">
    
    <div class="tab1">
      <p class="title>">First</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus itaque quidem minus nostrum, voluptatem accusamus aspernatur quia harum ratione, officia laudantium inventore autem doloribus atque labore numquam non. Hic, animi.</p>
    </div>
    
    <div class="tab2">
      <p class="title>">Second</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum nesciunt ipsum dolore error repellendus officiis aliquid a, vitae reprehenderit, accusantium vero, ad. Obcaecati numquam sapiente cupiditate. Praesentium eaque, quae error!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, maiores.</p>
    </div>
    
    <div class="tab3">
      <p class="title>">Third</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
    
    <div class="tab4">
      <h2>Fourth</h2>
      <p> afdadfadfadfad Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, nobis culpa rem, vitae earum aliquid.</p>
    </div>
    
  </div>
  </div>
  
</div>
  
<div style="height:1000px;"></div>

And also you need to add JavaScript code to your project for scrolling to the tabs on click and to change the tabs too. So I added the following Javascript

<script>
var tabs = document.getElementsByClassName('tabs')[0];
for(let i = 0; i < 4; i++) {
  document.getElementsByTagName('a')[i].addEventListener('click', function() {
    document.getElementsByTagName('input').checked = false;
    var hrefLink = this.getAttribute("href");
    var isChecked = document.getElementById(hrefLink.split("#")[1]).checked;
    document.getElementById(hrefLink.split("#")[1]).checked = !isChecked;
    tabs.scrollIntoView();
  });
}
</script>

The JS (JavaScript) code first takes the "tabs" element into a variable to use it to scroll later. The loop is done four times since you have four tabs. In each loop, I added a function to anchor tag and it says that when an anchor tag is clicked, check it's "href" attribute to see which tab it has to open. So, "First uncheck all tabs and then check the only tab that I pressed". It is what the code says. Later, go to the "tabs" element which I stored in variable using the element.scrollIntoView() method.

Hope this answers your question.

user_94925130
user_51493270

After 2 days I achieved this with just HTML/CSS using a combination of :checked and :target.

These tabs are generally done with display: none; on all blocks (the actual content of the tab) and then whichever one is toggled with a :checked becomes display: block;.

Right after I posted this question, I did some more digging and discovered I could use :target. However, when tab 2 is not shown (display: none;), using :target on the id of tab 2 (#tab2) does not work as it doesn't exist on the page (display: none;). The two workarounds would be:

a) Use transparency: 0; toggling to transparency: 100; when :checked or :target.

b) Use z-index, toggling to higher levels when :checked or :target.

I chose to go with the workaround b) as it would give me greater control. In short, I "unchecked" tab 1 (didn't assign checked to the input). And instead made it show first (as if checked) by giving it a z-index: 99; while giving the remaining tabs a z-index: 98;. Next, I gave the targeting ability a z-index: 100;. So that clicking from a link at the top of the page will jump down to the respective tab and show it above the other tabs (which would have a lower z-index: 98; or z-index: 99;). Now that the user is down the page at the tabs, they can click on these tabs (thus marking them :checked) which will over-ride it again by having :checked give a z-index: 101; (which is above any :target tabs with a z-index: 100; (note that the url on the page will show the target #tabnumber at the end so it needs to be over-ridden as it won't go away).

The only downside is that if they have clicked a tab directly (:checked), scroll back up to the links to the tabs, click a link to a tab (:target), they will jump down to the tabs, but it will not display the correct tab as :checked has a higher z-index level than :target. Not the end of the world as this will rarely happen and they can simply click a tab (:checked) to make it work.

Example code below (apologies for the mess as it's stripped from it's deployment and was stitched together using several sources). The only thing I can't get working in the example below is the over-ridding of :hover on the labels, but it works on my deployment. I will return here and fix it later.

/* Component Needs */

.pc-tab > input {
    /* opacity: 0; */
    visibility: hidden;
    position: absolute;
    
    }
    
.pc-tab .tab_content > div {
  /* display: none; */
    display: block;
    position: absolute;
    }

#tab1_content {
    z-index: 99;
    }

#tab2_content {
    z-index: 98;
    }
    
#tab3_content {
    z-index: 98;
    }
    
#tab4_content {
    z-index: 98;
    }

    
#tab1:target ~ .tab_container .tab1,
#tab2:target ~ .tab_container .tab2,
#tab3:target ~ .tab_container .tab3,
#tab4:target ~ .tab_container .tab4{
  /* display: block; */
    z-index: 100; /* 101 */
    }  
    
#tab1:checked ~ .tab_container .tab1,
#tab2:checked ~ .tab_container .tab2,
#tab3:checked ~ .tab_container .tab3,
#tab4:checked ~ .tab_container .tab4{
  /* display: block; */
    z-index: 101;
    }
    

/* tab visual function */
    
.tabs nav .tab1 label {
    background: transparent;
    }    

#tab1:target ~ .tabs nav .tab1 label,
#tab2:target ~ .tabs nav .tab2 label,
#tab3:target ~ .tabs nav .tab3 label,
#tab4:target ~ .tabs nav .tab4 label {   
    background: transparent;
    }
    
#tab1:target ~ .tabs nav li:not(.tab1) label,
#tab2:target ~ .tabs nav li:not(.tab2) label,
#tab3:target ~ .tabs nav li:not(.tab3) label,
#tab4:target ~ .tabs nav li:not(.tab4) label {   
    background: #eeeeee;
    }

#tab1:checked ~ .tabs nav li:not(.tab1) label,
#tab2:checked ~ .tabs nav li:not(.tab2) label,
#tab3:checked ~ .tabs nav li:not(.tab3) label,
#tab4:checked ~ .tabs nav li:not(.tab4) label {   
    background: #eeeeee !important;
    }

    
    

#tab1:checked ~ .tabs nav .tab1 label,
#tab2:checked ~ .tabs nav .tab2 label,
#tab3:checked ~ .tabs nav .tab3 label,
#tab4:checked ~ .tabs nav .tab4 label {
    background: transparent !important;
    color: #111;
    position: relative;
    }
    
#tab1:checked ~ .tabs nav .tab1 label:after,
#tab2:checked ~ .tabs nav .tab2 label:after,
#tab3:checked ~ .tabs nav .tab3 label:after,
#tab4:checked ~ .tabs nav .tab4 label:after {
    background: transparent !important;
    }
       
label {
    cursor: pointer;
    }    
    


/* Visual Styles */

$activeColor: transparent; /* #ffffff */
$unactiveColor: #eeeeee;
$unactiveHoverColor: red; /* #dddddd */
$offsetHeight: 50px;


/* *, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
} */

.pc-tab *,
.pc-tab *:after, 
.pc-tab *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


.pc-tab { 
    width: 100%;
    /* max-width: 700px; */
    margin: 0 auto;
    }

.tabs ul {
    list-style: none;
    margin: 0;
    padding: 0;
    }

    
.tabs ul li label {
    /* font-family: "Raleway"; */
    font-size: 15px;
    line-height: 21px;
    
    float: left;
    padding: 15px 10px;
    border: 1px solid #ddd;
    border-bottom: 0;
    background: #eee; }};
    color: #444;
    }
    
    
    


    
#over #tab1 ~ .tabs nav .tab1 label:hover,
#over #tab2 ~ .tabs nav .tab2 label:hover,
#over #tab3 ~ .tabs nav .tab3 label:hover,
#over #tab4 ~ .tabs nav .tab4 label:hover,
#over .tabs ul li label:hover,
label:hover {
    background: red !important;
    }


.tabs ul li label:active {
    background: transparent;
    }   

.tabs ul li label:not(:last-child) {
    border-right-width: 0;
    }
  
    
.tab_content {
    clear: both;
    }
    
.tab_content div {
      padding-bottom: 20px;
      padding-right: 20px;
      padding-left: 20px;
      padding-top: calc(20px + 50px);
      
      width: 100%;
      border: 1px solid #ddd;
      /* background: #fff; */
      line-height: 1.5em;
      letter-spacing: 0.3px;
      color: #444;
        
    box-sizing: border-box;
    }
    
.tab_content div h2 {
    margin: 0;
    font-family: "Raleway";
    letter-spacing: 1px;
    color: #34495e;
    }



label {
    width: calc(100% / 4);
    box-sizing: border-box;
    text-align: center;
    height: 50px;
    }

nav {
    }
    
.tab_content .tab1 {
  background-color: pink;
  }

.tab_content .tab2 {
  background-color: lightblue;
  }

.tab_content .tab3 {
  background-color: lightyellow;
  }

.tab_content .tab4 {
  background-color: lightgreen;
  }    
    
    

.tabs {
    height: 100%;
    display: table;
    width: 100%;
    margin-bottom: -50px;
    position: relative;
    z-index: 2;
    }
    
.tabs li {
    margin-bottom: 0;
    }

.tab_container {
    width: 100%;
    height: 0;
    padding-bottom: calc((100% / 16) * 9);
    position: relative;
    z-index: 1;
    }

.tab_content {
    position: absolute;
    height: 100%;
    width: 100%;
    }

.tab_content div {
    height: 100%;
    }
   
    
.title {
    padding: 0;
    }
<div style="width: 700px; margin: 0 auto;">
  <ul>
    <li><a href="#tab1">Link to First Tab</a></li>
    <li><a href="#tab2">Link to Second Tab</a></li>
    <li><a href="#tab3">Link to Third Tab</a></li>
    <li><a href="#tab4">Link to Fourth Tab</a></li>
  </uL> 
</div>

<div style="height:300px;"></div>


<!-- 
ORIGINAL BY RENA.TO 
https://codepen.io/renatorib/pen/rlpfj
-->

        <div class="pc-tab" id="over">
    
<input id="tab1" type="radio" name="pct" />
<input id="tab2" type="radio" name="pct" />
<input id="tab3" type="radio" name="pct" />
<input id="tab4" type="radio" name="pct" />  
  
<div class="tabs">
  <nav>
    <ul>
      <li class="tab1">
        <label for="tab1">First Tab</label>
      </li>
      <li class="tab2">
        <label for="tab2">Second Tab</label>
      </li>
      <li class="tab3">
        <label for="tab3">Third Tab</label>
      </li>
      <li class="tab4">
        <label for="tab4">Fourth Tab</label>
      </li>
    </ul>
  </nav>
</div>   

  
<div class="tab_container">
  <div class="tab_content">
    
    <div class="tab1 tab_block" id="tab1_content">
      <p class="title">First</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus itaque quidem minus nostrum, voluptatem accusamus aspernatur quia harum ratione, officia laudantium inventore autem doloribus atque labore numquam non. Hic, animi.</p>
    </div>
    
    <div class="tab2 tab_block" id="tab2_content">
      <p class="title">Second</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum nesciunt ipsum dolore error repellendus officiis aliquid a, vitae reprehenderit, accusantium vero, ad. Obcaecati numquam sapiente cupiditate. Praesentium eaque, quae error!</p>
    </div>
    
    <div class="tab3 tab_block" id="tab3_content">
      <p class="title">Third</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
    
    <div class="tab4 tab_block" id="tab4_content">
      <p class="title">Fourth</p>
      <p> afdadfadfadfad Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, nobis culpa rem, vitae earum aliquid.</p>
    </div>
    
  </div>
</div>        

  
        </div>


<div style="height:1000px;"></div>

user_58965380

You can achieve this with pure HTML. Here it is:

<a href = "#tab1">Jump to Tab 1</a>
<a href = "#tab2">Jump to Tab 2</a>
<a href = "#tab3">Jump to Tab 3</a>

Hope this worked.

user_136089980

With pure html+css this result is unattainable because a href does not retain the changed style, and input cannot have href.
The simplest solution is html checked and js href with css :checked and :target.

For this you need input type="radio". All inputs has to have the same name and different values to work correctly.
Html code like below will not work:

<label><input type="radio" name="bad" value="0">caption</label>

is absolutely valid, but for css selector like input + label, input:checked + label input can't be inside. For this purpose you need a longer (ugly) write method:

<input id="unique" type="radio" name="good" value="1">
<label for="unique">caption</label>

Why not checkbox?
Among the type="radio" with same name only one can be checked, but all of type="checkbox" with the same name can be checked at once, even worse checkbox onclick changes the state of checked / unchecked, but js just jumps and points to a new :target with each click - so, that's not what you need.

As a snippet I give you my whole test page - take it, play with it - there are every cases which came to my mind, to see how it works. Every piece of code is correct.

The key part of the code to the simplest organizer to switch content:

<!DOCTYPE html><head><style> - shortening only for local tests

p, input{ display: none}                /* p as container of switched text */
:target{ display: block}                /* address in clicked href="" */
input + label{ text-align: center; display: inline-block; padding: 10px; width: 150px}
input:checked + label { font-weight: bold}

</style></head><body>

<input type="radio" id="a1" name="radio" value="1" onclick="jump('one')"><label for="a1">one</label>
<input type="radio" id="a2" name="radio" value="2" onclick="jump('two')"><label for="a2">two</label>
<input type="radio" id="a3" name="radio" value="3" onclick="jump('three')"><label for="a3">three</label>
<p id="one"><b>ONE</b> simplest js content switcher </p>
<p id="two"><b>TWO</b> this is <i>&lt;p id="two"&gt;</i> as a <i>:target</i> of js function <i>jump('two')</i></p>
<p id="three"><b>THREE</b> ... </p>

...other content...

<script> function jump(x){ location.href = "#" + x}</script>
</body></html>

For your information, in pure HTML there are tags like iframe and details which also increase the window capacity, without any js.

 function jump(x){ location.href = "#" + x}
*{ box-sizing: border-box}
p, input{ display: none}
.show{ display: block}
:target{ display: block}
input + label{ text-align: center; display: inline-block; padding: 10px}
input[type=radio] + label{ width: 150px}
input[type=checkbox] + label{ width: 10%}
input:checked + label { font-weight: bold}
body{ background: #013; color: #fff}
div{ background: 0; padding: 0; margin: 0 0 10px; }
p{ padding: 20px; background: 0; color: #abc}
div p{ margin: 0; border-radius: 0 10px 10px;}
.show{ margin: 20px auto; border-radius: 20px; width: 90%;}
:target{ background: #fff; color: #123; }
input + label{ margin: 2px 0 0; border-radius: 20px 10px 0 0; color: #345; background: linear-gradient( to top, #fff, #ace, #579); border: 1px solid #ace; }
input:checked + label, i {  background: #fff; color: #56b; border-color: #fff}
:not([name=radio]):checked + label{ border-radius: 20px 100px;}
[name="box"]+ label, [name="box"]:checked + label{ border-radius: 10px }
b{ display: block; padding: 0 50px 20px}
details{  width: 80%; margin: 10px auto}
details[open]{ height: 1000px;}
summary{ text-align: center; margin: 0 auto; display: block}
details[open] summary{ background: #fff; margin: 50px auto; padding: 10px}
#first{ min-height: 120px;}
#last{ text-align: center; margin: 0 auto 50px}
a, summary{ text-decoration: none; outline: 0; color: #456; }
<input type="radio" id="a1" name="radio" value="1" onclick="jump('one')"><label for="a1">one</label>
<input type="radio" id="a2" name="radio" value="2" onclick="jump('two')"><label for="a2">two</label>
<input type="radio" id="a3" name="radio" value="3" onclick="jump('three')"><label for="a3">three</label>
<input type="radio" id="a4" name="radio" value="4" onclick="jump('four')"><label for="a4">four</label>
<input type="radio" id="a5" name="radio" value="5" onclick="jump('five')"><label for="a5">five</label>
<input type="radio" id="a6" name="radio" value="6" onclick="jump('six')"><label for="a6">six</label>
<input type="radio" id="a7" name="uno" value="7" onclick="jump('two')"><label for="a7">&lowast; two</label>
<input type="radio" id="a8" name="due" value="8" onclick="jump('five')"><label for="a8">&lowast; five</label>
<a href="">&lowast;</a>
<div id="first">
<p id="one"><b>ONE</b> simplest js content switcher </p>
<p id="two"><b>TWO</b> this is <i>&lt;p id="two"&gt;</i> as a <i>:target</i> of js function <i>jump('two')</i></p>
<p id="three"><b>THREE</b> ... </p>
</div>
<details><summary>click me to change content size</summary>Limitations:<ul><li>using js is now (almost) safe - browsers finally support events, recently even Safari, but on older devices - content will be unavailble</li><li>this kind of layout is not inherently responsive - it can be done well, even mobile-first (latest approach) but it's not easy</li><li>all content is loaded on startup (using &lt;iframe&gt; only partially)</li><li>in case of css loading failure the page will be ugly - don't use multiple or huge css files</li></ul>
</details>
<p id="four" class="show"><b>FOUR</b> The top row is type="radio" and the bottom row is type="checkbox". Both types 6x of same name and 2 radio strangers - to see how it works.<br>Above right, a small anchor to the initial view</p>
<p id="five" class="show"><b>FIVE</b> Checkbox onclick changes the state of checked / unchecked, but js just jumps and points to a new :target with each click</p>
<p id="six" class="show"><b>SIX</b> ... </p>
<div id="last">
<input type="checkbox" id="b1" name="box" value="1" onclick="jump('one')"><label for="b1">one</label>
<input type="checkbox" id="b2" name="box" value="2" onclick="jump('two')"><label for="b2">two</label>
<input type="checkbox" id="b3" name="box" value="3" onclick="jump('three')"><label for="b3">three</label>
<input type="checkbox" id="b4" name="box" value="4" onclick="jump('four')"><label for="b4">four</label>
<input type="checkbox" id="b5" name="box" value="5" onclick="jump('five')"><label for="b5">five</label>
<input type="checkbox" id="b6" name="box" value="6" onclick="jump('six')"><label for="b6">six</label>
</div>

user_140125420
Related