Solved

How do I link to a specific tab in a javascript tabbed content section?

Posted on 2010-11-11
8
468 Views
Last Modified: 2012-08-13
I have a javascript tabbed content section in the middle of one of my pages.  Each section of the content uses a class called "tabContent" followed by a unique id value.  If you hover over the tabs, the link shows up as "http://www.pagename.com/index.php#id".  The default setting for the highlighted tab is for the first tab to be active and highlighted.

I have a css navbar at the top of the page, and I'd like to be able to link to a specific tab within the javascript container, and make it active and highlighted.  I tried simply putting the link above in as the <a href:> on the menu.  It will take me to the correct section of the page (I assume because the bookmark is located there) but it doesn't highlight the tab or make the tab active.

I have enclosed the javascript code below.  Can someone help?

If you'd like to see the code in action, you can view at:  http://www.kcusbc.com at the bottom of the page.
<script type="text/javascript">
    //<![CDATA[

    var tabLinks = new Array();
    var contentDivs = new Array();

    function init() {

      // Grab the tab links and content divs from the page
      var tabListItems = document.getElementById('tabs').childNodes;
      for ( var i = 0; i < tabListItems.length; i++ ) {
        if ( tabListItems[i].nodeName == "LI" ) {
          var tabLink = getFirstChildWithTagName( tabListItems[i], 'A' );
          var id = getHash( tabLink.getAttribute('href') );
          tabLinks[id] = tabLink;
          contentDivs[id] = document.getElementById( id );
        }
      }

      // Assign onclick events to the tab links, and
      // highlight the first tab
      var i = 0;

      for ( var id in tabLinks ) {
        tabLinks[id].onclick = showTab;
        tabLinks[id].onfocus = function() { this.blur() };
        if ( i == 0 ) tabLinks[id].className = 'selected';
        i++;
      }

      // Hide all content divs except the first
      var i = 0;

      for ( var id in contentDivs ) {
        if ( i != 0 ) contentDivs[id].className = 'tabContent hide';
        i++;
      }
    }

    function showTab() {
      var selectedId = getHash( this.getAttribute('href') );

      // Highlight the selected tab, and dim all others.
      // Also show the selected content div, and hide all others.
      for ( var id in contentDivs ) {
        if ( id == selectedId ) {
          tabLinks[id].className = 'selected';
          contentDivs[id].className = 'tabContent';
        } else {
          tabLinks[id].className = '';
          contentDivs[id].className = 'tabContent hide';
        }
      }

      // Stop the browser following the link
      return false;
    }

    function getFirstChildWithTagName( element, tagName ) {
      for ( var i = 0; i < element.childNodes.length; i++ ) {
        if ( element.childNodes[i].nodeName == tagName ) return element.childNodes[i];
      }
    }

    function getHash( url ) {
      var hashPos = url.lastIndexOf ( '#' );
      return url.substring( hashPos + 1 );
    }

    //]]>
</script>

Open in new window

0
Comment
Question by:DennisHacker
  • 5
  • 3
8 Comments
 
LVL 51

Expert Comment

by:HainKurt
ID: 34116212
actually I could not get what are you trying to do... code looks working fine...

do you want something like this

changeTab(3)

so when called it goes to tab 3 on client by a js call?
0
 
LVL 51

Expert Comment

by:HainKurt
ID: 34116245
if my above statements are correct, modify the script as

    function showTab(n) {
      var selectedId = (n)?n:getHash( this.getAttribute('href') );
...

then call showtab(3) to change to tab3... no additional code required...
0
 

Author Comment

by:DennisHacker
ID: 34119081
I tried what you listed above and when I call showTab(3) it returns "false".
0
Is Your AD Toolbox Looking More Like a Toybox?

Managing Active Directory can get complicated.  Often, the native tools for managing AD are just not up to the task.  The largest Active Directory installations in the world have relied on one tool to manage their day-to-day administration tasks: Hyena. Start your trial today.

 
LVL 51

Expert Comment

by:HainKurt
ID: 34123352
it will return false... it is the return value of function...
actually what are you trying to do?

when you make those changes and call showTab(3) the third tab should be selected as if it is clicked by user...

if this is not what you want, please clarify...
0
 

Author Comment

by:DennisHacker
ID: 34123450
That's exactly what I'm trying to do.  However, it returned a value of "false" on a white screen.

I would like to be able to click on a submenu choice in the nav bar, and have it jump to the location of the tabbed information, select the third tab, and show the content in that area.  So there's still the problem of jumping to the bookmark on the page, for location purposes.  Then, selecting the correct tab.

I must be missing something silly.  The literal value of the link in the nav bar is "Standings".

I called the function by putting in the following:

<a href="javascript: showTab(3)">Standings</a>

That should have selected the tab, but it wouldn't accomplish the movement to the bookmark on the page.  I realize that.  The bookmark is simply "www.kcusbc.com/index.php#seniors"

Thanks for your help on this.
0
 
LVL 51

Accepted Solution

by:
HainKurt earned 500 total points
ID: 34124762
what about this

www.kcusbc.com/index.php?tabid=3

and with js get this parameter and call

showTab(getURLParam("tabid"))

js taken from : http://mattwhite.me/11tmr.nsf/D6Plinks/MWHE-695L9Z
function getURLParam(strParamName){
  var strReturn = "";
  var strHref = window.location.href;
  if ( strHref.indexOf("?") > -1 ){
    var strQueryString = strHref.substr(strHref.indexOf("?")).toLowerCase();
    var aQueryString = strQueryString.split("&");
    for ( var iParam = 0; iParam < aQueryString.length; iParam++ ){
      if ( 
aQueryString[iParam].indexOf(strParamName.toLowerCase() + "=") > -1 ){
        var aParam = aQueryString[iParam].split("=");
        strReturn = aParam[1];
        break;
      }
    }
  }
  return unescape(strReturn);
}

Open in new window

0
 
LVL 51

Expert Comment

by:HainKurt
ID: 34124774
or just use

if (strHref.indexOf("#seniours")>-1) showTab(3);

with "www.kcusbc.com/index.php#seniors" syntax...
0
 

Author Comment

by:DennisHacker
ID: 34124884
I like the idea you have here.  I won't be able to work on it tonight, but I will definitely try that tomorrow.  I believe that will work.  I'll be back to award points tomorrow.  Thanks.
0

Featured Post

Optimizing Cloud Backup for Low Bandwidth

With cloud storage prices going down a growing number of SMBs start to use it for backup storage. Unfortunately, business data volume rarely fits the average Internet speed. This article provides an overview of main Internet speed challenges and reveals backup best practices.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Build an array called $myWeek which will hold the array elements Today, Yesterday and then builds up the rest of the week by the name of the day going back 1 week.   (CODE) (CODE) Then you just need to pass your date to the function. If i…
3 proven steps to speed up Magento powered sites. The article focus is on optimizing time to first byte (TTFB), full page caching and configuring server for optimal performance.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

803 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question