Button not showing selected on tab load from jquery

When I load the page normally, it will display corrected. However when attempting to load the tab through the url IE: page.php#tab2, the tab navigation will not select the tab I am currently on and will instead load the default tab “tab1”

jquery:

$(document).ready(function() {

    //When page loads...
    $(".tab_content").hide(); //Hide all content
    $("ul.tabs li:first").addClass("active").show(); //Activate first tab
    $(".tab_content:first").show(); //Show first tab content
    
    var tabId = location.hash; // will look something like "#h-02"
    
    if(tabId){
    $(".tab_content").hide(); //Hide all content
    $(tabId).addClass("active").show(); //Activate first tab
   $(tabId).show(); // this will fired only when url get hash
 }

    //On Click Event
    $("ul.tabs li").click(function() {

        $("ul.tabs li").removeClass("active"); //Remove any "active" class
        $(this).addClass("active"); //Add "active" class to selected tab
        $(".tab_content").hide(); //Hide all tab content

        var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
        $(activeTab).fadeIn(); //Fade in the active ID content
        return false;
    });

html:

<div id="tab2" class="tab_content">
<article class="module width_quarter">
<header><h3>GeoLocation</h3></header>
<div class="module_content">
Content added here...
</article><!-- end of styles article -->
<div class="clear"></div>
</div></div><!-- end of #tab2 -->

What it’s doing… https://i.stack.imgur.com/40Tc5.png

What I want it to do… https://i.stack.imgur.com/O8Fit.png

Navigation:

    <section id="main" class="column">  
    <article class="module width_full">
    <header><h3 class="tabs_involved">Lead ID: 993923</h3>
    <ul class="tabs">
        <li><a href="#tab1">Profile</a></li>
        <li><a href="#tab2">Roof Information</a></li>
        <li><a href="#tab3">Financials</a></li>
        <li><a href="#tab4">Work Orders</a></li>
        <li><a href="#tab5">Contracts</a></li>
        <li><a href="#tab6">Documents</a></li>
        <li><a href="#tab7">Gallery</a></li>
    </ul>
    </header>

Answer

Since you are doing the same thing twice, it’s good practice to consolidate into a single function. Doing it that way can also help find errors since you have to look in one place instead of 2 or more

$(document).ready(function() {
  $(".tab_content").hide();
  let tabId = location.hash ? location.hash.replace('#', '') : 'tab1';
  showTabContent(tabId)

  //On Click Event
  $("ul.tabs li").click(function() {
    let tabId = $(this).find("a").attr("href").replace('#', '');
    showTabContent(tabId);
    return false
  });
});

function showTabContent(tabId) {
  $("ul.tabs li").removeClass("active");
  $(`a[href='#${tabId}']`).closest('li').addClass("active");
  $(".tab_content").hide(); //Hide all tab content
  $(`#${tabId}`).fadeIn(); //Fade in the active ID content
}

.tabs li.active a {
  background: #000;
  color: #fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="main" class="column">
  <article class="module width_full">
    <header>
      <h3 class="tabs_involved">Lead ID: 993923</h3>
      <ul class="tabs">
        <li><a href="#tab1">Profile</a></li>
        <li><a href="#tab2">Roof Information</a></li>
        <li><a href="#tab3">Financials</a></li>
        <li><a href="#tab4">Work Orders</a></li>
        <li><a href="#tab5">Contracts</a></li>
        <li><a href="#tab6">Documents</a></li>
        <li><a href="#tab7">Gallery</a></li>
      </ul>
    </header>



    <div id="tab1" class="tab_content">
      <article class="module width_quarter">
        <header>
          <h3>Tab 1</h3>
        </header>
        <div class="module_content">
          Content added here...
      </article>
      <!-- end of styles article -->
      <div class="clear"></div>
      </div>
      <div id="tab2" class="tab_content">
        <article class="module width_quarter">
          <header>
            <h3>GeoLocation</h3>
          </header>
          <div class="module_content">
            Content added here...
        </article>
        <!-- end of styles article -->
        <div class="clear"></div>
        </div>
        <!-- end of #tab2 -->