Solved

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

Posted on 2010-11-11
8
478 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 51

Expert Comment

by:Huseyin KAHRAMAN
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:Huseyin KAHRAMAN
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 51

Expert Comment

by:Huseyin KAHRAMAN
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:
Huseyin KAHRAMAN 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:Huseyin KAHRAMAN
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

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

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.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

735 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