HOW CAN I MAKE LINK OF A TAB USING JAVASCRIPT?

C G E Mannerheim

Total Post:29

Points:203
Posted by  C G E Mannerheim
 1503  View(s)
Ratings:
Rate this:
Hi!

I have a sample page with four tabs (tabs.html). Tabs are displayed as follows:

<ul class="tabs">

    <li><a href="javascript:tabSwitch('tab1', 'content for first tab');" id="tab1" class="active"> first tab'</a></li>

    <li><a href="javascript:tabSwitch('tab2', 'content for second tab');" id="tab2"> second tab </a></li>

    <li><a href="javascript:tabSwitch('tab3', 'content for third tab');" id="tab3"> third tab'</a></li>

  <li><a href="javascript:tabSwitch('tab4', 'content for fourth tab');" id="tab3"> fourth tab</a></li>

</ul>

The JavaScript used to switch tabs is:

function tabSwitch(active, number, tab_prefix, content_prefix) {

    for (var i = 1; i < number+1; i++) { 

        document.getElementById(content_prefix+i).style.display = 'none'; 

        document.getElementById(tab_prefix+i).className = ''; 

    } 

    document.getElementById(content_prefix+active).style.display = 'block'; 

    document.getElementById(tab_prefix+active).className = 'selected';     

}

Now, by default, when I link to tabs.html, the first tab is set to active. Is it possible to create a link from another site that links to tabs.html and forces the second or third tab to be active?

Ok
  1. shreesh chandra shukla

    Post:105

    Points:735
    Re: How can I make link of a tab using JavaScript?

    Hi!

    You can try to get the tab you want to add from the hash like tabs.html#tab1. Then on a code block that run on the page onload do something like this:

    var hash = window.location.hash;

    if (hash == "#tab1")

        tabSwitch('tab_1', 'content_1');

    else if (hash == "#tab2")

        tabSwitch('tab_2', 'content_2');

    else if (hash == "#tab3")

        tabSwitch('tab_3', 'content_3');


Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!