link to a page with tabbed content doesnt work

Question

I have been trying to have a direct link, so that whenever that link is clicked the specific tab opens. However when I use domainname.com/aboutus#award_tab the tab name doesn't open the specific tab I want.

All content in the tab has been given the section ids mentioned below. Here is the code that I have used:

if (jQuery(".effect-1 span:first-child").hasClass("active")) {
  //alert('first');
  jQuery('#deo_tab').show();
  jQuery('#sustainablity_tab').hide();
  jQuery('#award_tab').hide();
} else if (jQuery(".effect-1 span::nth-child(2)").hasClass("active")) {
  //alert('mid');
  jQuery('#deo_tab').hide();
  jQuery('#sustainablity_tab').show();
  jQuery('#award_tab').hide();
} else if (jQuery(".effect-1 span:last-child").hasClass("active")) {
  //alert('last');
  jQuery('#deo_tab').hide();
  jQuery('#sustainablity_tab').hide();
  jQuery('#award_tab').show();
}

Answer 1

$(".tab a").click(function(){
 var tab= $(this).data('tab');
$(".content").addClass("dnone");
 $("#"+tab).removeClass("dnone");

});

.tab{
display:flex;
}
.tab>a{
padding:10px
}

.dnone{display:none}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tab">
    <a href="#content1" class="tabs tab1" data-tab="content1">tab1</a>
    <a href="#content2" class="tabs tab2" data-tab="content2">tab2</a>
    <a href="#content3" class="tabs tab3" data-tab="content3">tab3</a>
</div>

<div class="contents">
    <div id="content1" class="content">content1</div>
    <div id="content2" class="content dnone">content2</div>
    <div id="content3" class="content dnone">content3</div>
</div>
<!- try this i hope it work for you->