Linking directly to a CSS tab

Issue

I'm trying to figure out how to give somebody a direct link to a CSS tab on my page, but giving them pagename.html#tab2 doesn't work. If it's possible to do this without a script, it would be best, but I'm open to anything at this point. BTW, feel free to tear apart my code! I'm just learning how to do this, so it may not be as efficient as it should be! Thanks!

/* Tabs */

input  /*hide radio buttons */
{
  display: none;
}

input+label  /* show labels in line */
{
  display: inline-block;
  font-size: 1.3em;
}

input~.tab  /* show contents only for selected tab */
{
  display: none;
}

#tab1:checked~.tab.content1,
#tab2:checked~.tab.content2 {
  display: block;
}

input+label {
  border: 1px solid #999;
  background: #101010;
  padding: 4px 12px;
  border-radius: 6px 6px 0 0;
  position: relative;
  top: 1px;
}

input+label:hover {
  background: #212121;
}

input:checked+label {
  background: transparent;
  border-bottom: 2px solid #292929;
}

input~.tab {
  border-top: 1px solid #999;
  padding: 12px;
}

<div style="background-color: #292929;color: #b2b2b2;line-height: 1.5em;font-family: Mulish,sans-serif;">
  <input type="radio" name="tabs" id="tab1" checked="checked" />
  <label for="tab1">Tab 1</label>
  <input type="radio" name="tabs" id="tab2" />
  <label for="tab2">Tab 2</label>
  <div class="tab content1">
    <p>Tab content 1</p>
  </div>
  <div class="tab content2">
    <p>Tab content 2</p>
  </div>
</div>

Solution

If you specify

<input type="radio" name="tabs" id="tab1" checked />

then this radio button will be checked by default when the page is loaded. If you want the other tab to be checked you can do that by getting the hash from the URL and then checking it programmatically like so

<script>
// this will be #tag2 in your case
let hash = document.location.hash;

// remove the hash sign
hash = hash.slice(1, hash.length);

let tab = document.getElementById( hash );

// check the required input element
tab.setAttribute('checked', 'checked');

</script>

You will want to include this script near the end of your body, well after the input elements are loaded.

Answered By - mrmonsieur