Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Mar 2013
    Thanked 0 Times in 0 Posts

    Linking to a Javascript element


    I am using the Tab View script (original found here: http://www.javascriptkit.com/script/.../tabview.shtml) on my website, and am hoping I can create links from different places to make each tab active. For example, from Page A I want to link to the page with the tabs, and have Tab 1 be the active tab. From Page B I want to link to the page with the tabs, and have Tab 2 be the active tab... and so on.

    Is this possible?

    Thanks for any assistance!

  2. #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Thanked 4,947 Times in 4,908 Posts
    Since I just answered a question about "tabbed form" this is easy.
    <style type="text/css">
    div#ALL { position: relative; width:80%; height: 400px; margin-top: 30px; }
    div.tabBody { position: absolute; top: 0px; left: 0px; 
                  width: 100%; height: 100%;
                  z-index: 1; 
                  background-color: yellow; border: solid brown 2px; 
                  padding: 20px; 
    div.tabHead { position: absolute; top: -20px; left: 10px; 
                  width: 100px; height: 22px;
                  z-index: 2;
                  text-align: center; 
                  background-color: lightyellow; border: solid brown 2px; border-bottom: none;
    Stuff at the top of the page.
    <input type="submit" value="Submit all parts of form"/>
    <div id="ALL">
        <div id="TABS">
            <div id="TAB1" class="tabHead">One</div>
            <div id="TAB2" class="tabHead" style="left: 140px;">Two</div>
            <div id="TAB3" class="tabHead" style="left: 260px;">Three</div>
        <div id="TABBODY1" class="tabBody">
            This is body 1<br/>
            Enter your name: <input name="yourName"/>
        <div id="TABBODY2" class="tabBody">
            2 2  second 2 2<br/>
            Enter your country: <input name="yourCountry"/>
        <div id="TABBODY3" class="tabBody">
            Third one<br/>
            Enter your phone number: <input name="yourPhone"/>
    <script type="text/javascript">
    for ( var t = 1; t < 9999; ++t )
        var tab = document.getElementById("TAB"+t);
        if ( tab == null ) break;
        tab.onclick = function() { front(this.id); }
    function front( id )
        var which = Number( id.substring(3) );
        for ( var t = 1; t < 9999; ++t )
            var dv = document.getElementById("TABBODY"+t);
            if ( dv == null ) return;
            dv.style.zIndex = t == which ? 5 : 1;
            var tab = document.getElementById("TAB"+t);
            tab.style.backgroundColor = t == which ? "yellow" : "lightyellow";
            tab.style.zIndex = t == which ? 7 : 1;
    var starttab = "TAB1"; // assume
    var hash = location.hash;
    // URL ends with #TABn then start with that tab instead:
    if ( ( /^\#TAB\d\d?$/ ).test(hash) ) { starttab = hash.substring(1); }
    front( starttab );
    This is using my own version of tabbing, but it's not much different than the JavaScriptKit version.

    You can see the trick: Pick up the stuff after the # in the URL and, if it matches one of our tabs, pre-select that tab.
    Be yourself. No one else is as qualified.


Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts