Linking to a particular (hidden) tab from the current page and other pages using anchors in JQuery?

Question

I've examined multiple answers on this site but they haven't been able to solve my problem for whatever reason (how to select a particular tab from other page using anchor tag in JQuery..?). I am only testing this on my local computer so I'm not sure if that would have an impact.

I want to link to each tab from the current page as well as from other pages. Right now I am able to click each tab and it works perfectly and the site URL changes (#tab1, #tab2 etc).

However, for example, if I click the Tab 1 Link (not the actual tab, but a link on the page that is targeted at tab 1) while Tab 2 is visible, nothing happens but the URL changes to /site.html#tab1. However, if I click the Tab 1 link while Tab 1 is visible, it successfully brings me to Tab 1. Something is going wrong because the tabs are hidden - links only work for the tab that is currently visible. I figure if I can at least get it working within the page, I can get it working from links outside the page as well.

Basically, I want to be able to send someone a link to /site.html#tab3 and have it go to that tab.

My code:

    $(document).ready(function() {

      //Default Action
    $(".tab_content").hide(); //Hide all content
    $("ul.tabs li:first").addClass("active").show(); //Activate first tab
    $(".tab_content:first").show(); //Show first tab content

    //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 rel attribute value to identify the active tab + content
        $(activeTab).fadeIn(); //Fade in the active content
        return;
    });
});

And:

$(document).ready(function () {

    var tabId = window.location.hash; // will look something like "#h-02"
    $(tabId).click(); // after you've bound your click listener
});

And the tabs:

 <ul class="tabs">
        <li><a href="#tab1">Ex 1</a></li>
        <li><a href="#tab2">Ex 2</a></li>
        <li><a href="#tab3">Ex 3</a></li>
        <li><a href="#tab4">Ex 4</a></li>

And an example tab content & a link on the page to the tab:

//tab content
<div class="tab_container">
        <div id="tab1" class="tab_content">
          <h2>Ex 1</h2>

//Link to Tab 1 from right menu
<ul><li>
<a href="#tab1">Click here to go to tab 1</a></li></ul>

Thank you!!

Answer 1

see this:

Do this when your page loads (when dom is ready)

var tabId = location.hash; // will look something like "#h-02"

check for the hash

 if(tabId){
   $(tabId).show(); // this will fired only when url get hash
   $(tabId).siblings().hide(); // this will show only targeted tab 
                               // others get hidden
 }

what this will do when you get a url like this site.html#tab1

variable tabId will have the value #tab1

then condition in if code block will show the targeted tab

Answer 2

Add a common class to your tab links. When you click the link you can trigger a click on the corresponding tab.

HTML

<a href="#tab1" class="tab-link">Click here to go to tab 1</a>

JS

$('.tab-link').click(function(){
    $('ul.tabs li a[href="'+this.href+'"]').parent().click();

});