How can I make link of a tab using JavaScript?

Total Post:28

Points:196
 1843  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. 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');


      Modified On Mar-30-2018 11:53:13 PM

Answer

NEWSLETTER

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