javascript - 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;
    });
Copy code

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 -->
Copy code

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>
Copy code