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

Question

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.

doğukan · Accepted Answer

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>

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

Tags:

javascript

html

css

tabs

anchor

Davbog

1 Answers

doğukan

Recent Activity

Donate For Us

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

Tags:

javascript

html

css

tabs

anchor

Davbog

1 Answers

doğukan

Related questions

Recent Activity

Donate For Us