Solved

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

Posted on 2010-11-11
8
490 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 3
8 Comments
 
LVL 56

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 56

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
Instantly Create Instructional Tutorials

Contextual Guidance at the moment of need helps your employees adopt to new software or processes instantly. Boost knowledge retention and employee engagement step-by-step with one easy solution.

 
LVL 56

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 56

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 56

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

On Demand Webinar: Networking for the Cloud Era

Ready to improve network connectivity? Watch this webinar to learn how SD-WANs and a one-click instant connect tool can boost provisions, deployment, and management of your cloud connection.

Question has a verified solution.

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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
There are times when I have encountered the need to decompress a response from a PHP request. This is how it's done, but you must have control of the request and you can set the Accept-Encoding header.
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 …
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

617 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