Solved

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

Posted on 2010-11-11
8
456 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
 
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
What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

 

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

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

762 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now