Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

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

Posted on 2010-11-11
8
Medium Priority
?
499 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 59

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 59

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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 59

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 59

Accepted Solution

by:
HainKurt earned 2000 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 59

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

The top UI technologies you need to be aware of

An important part of the job as a front-end developer is to stay up to date and in contact with new tools, trends and workflows. That’s why you cannot miss this upcoming webinar to explore the latest trends in UI technologies!

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
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…

704 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