How can I make link of a tab using JavaScript?

Total Post:28


 2054  View(s)
Rate this:

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>

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?

  1. Re: How can I make link of a tab using JavaScript?


    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


Please check, If you want to make this post sponsored

You are not a Sponsored Member. Click Here to Subscribe the Membership.