Activating tab using link of the another page

How to activate the tab when I click the link on the other page like:

when i click www.wakeke.com#go-to-tab2 the page will go to www.wakeke.com#go-to-tab2 and the tab 2 is activated.

here is my sample:

<div class="section group">

    <div class="col span_1_of_4">  <!-- tab 1 -->
    <a href="www.wakeke.com#business"><img src="http://wakeke.com/media/wysiwyg/call_center.png" alt="" /></a>
<h3>sample</h3>
<p>sample/p>
    </div>

    <div class="col span_1_of_4">  <!-- tab 2 -->
    <a href="www.wakeke.com#marketing"><img src="http://wakeke.com/media/wysiwyg/marketing.png" alt="" /></a>
<h3>sample</h3>
<p>sample/p>
    </div>
</div>

and here is the tab code:

<div class="tabbable tabs-left">
        <ul class="nav nav-tabs">
          <li  class="active"><a href="#business"  data-toggle="tab"><img src="http://wwww.wakeke/media/wysiwyg/call_center_thumb.png" alt="" />
          <div class="job-desc">
          <h4>sample</h4>
          <h5>sample</h5>
           </div>
          </a></li>

<li><a href="#marketing" data-toggle="tab"><img src="http://www.wakeke/media/wysiwyg/business_dev_thumb.png" alt="" />
          <div class="job-desc">
 <h4>sample</h4>
          <h5>sample</h5>
           </div>
</a></li>
</ul>
</div>

here is the image sample: When I click the image: image1 it will go to another page and the tab is activated image 2

Please help me. :) thank you

Answers 1

  • You can use the JavaScript location.hash and some usefull jQuery this way:

    <script>
    $(document).ready(function(){
        if(window.location.hash!=""){
    
            // Get the hash value and remove the # from it.
            var hash = window.location.hash.substr(1);
    
            // In the nav-tabs,
            // find the right tab by targetting the `h4` which contains the word you used has a hash
            // and click it.
            $(".nav-tabs").find("li h4:constains('"+hash+"')").click();
        }
    });
    </script>
    

    So now, since you provided only a sample,
    You will have to find the right words to use as a hash for each tabs.
    Be carefull about case sensitivity.

    Use one words contained in the h4 tag inside the li (the tab) that you want to be active.

    This small script must be in the page where tabs are... Anywhere in the <body>.
    It takes the hash from the URL and remove the # character.
    Then it uses it to find a tab.
    It may find more than one! Which will not do what you want.

    I think it is a good starter for you to try.
    I didn't test this code as I'm used to do before posting here... So I hope there is no mistake.
    ;)

    If you do not already use it, you have to include the jQuery library in your <head> like this:

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    




    EDIT
    I just noticed that you are using the same hash in the anchor's href.
    So here is a variant of the same thing that should avoid the possibility of clicking more than one tab.

    <script>
    $(document).ready(function(){
        if(window.location.hash!=""){
    
            // Get the hash value keeping the #.
            var hash = window.location.hash;
    
            // In the nav-tabs,
            // find the right tab by targetting the `a` which has the same href as your hash
            // and click it.
            $(".nav-tabs").find("li a[href='"+hash+'"]").click();
        }
    });
    </script>
    

Related Articles