Home > DeveloperSection > Forums > How can I make link of a tab using JavaScript?
C G E Mannerheim
C G E Mannerheim

Total Post:29

Posted on    August-19-2013 1:03 AM

 JavaScript JavaScript 

 1 Reply(s)
 1484  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?


shreesh chandra shukla
shreesh chandra shukla

Total Post:105

Posted on    August-19-2013 8:26 AM


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');

Don't want to miss updates? Please click the below button!

Follow MindStick