Re-write a Javascript function that selects active navigation tabs to work in IE8

Question

I have inherited some code in a recent project that makes use of some CSS3 selectors to add classes to some top level tab navigation. Due to the way this has been implemented on the back-end, the JS is searching the window.location.pathname to match a string, and then using that in another function to add the classname in the DOM. This second function is using nth-child(x) where x is a loop that corresponds to the appropriate matching string in the pathname and li. However, as you know, nth-child is not supported in IE8.

I was going to use this style of emulating nth-child in IE8, but I am unclear how to write the function to actually add this into the existing code.

Here is the JS code I am referencing:

var tabName = 'Product', tabType = window.location.pathname;
    if(tabType.indexOf('Product')>-1) tabName = 'Product'; 
    else if(tabType.indexOf('Business')>-1) tabName = 'Business'; 
    else if(tabType.indexOf('Support')>-1) tabName = 'Support';
    else if(tabType.indexOf('Article')>-1) tabName = 'Article';

$('.category-tabs li').removeClass('active');
for( var tn = 1; tn < $('.category-tabs li').length+1; tn ++ ){
    if($('.category-tabs li:nth-child(' + tn + ') a').html().indexOf(tabName)>-1){
        $('.category-tabs li:nth-child(' + tn + ')').addClass('active');
    } 
}

I would like to add a function that uses this loop, but then also sets it equal to a "li" so that I can use the li:first-child + li method of emulating nth-child, but I could really use some help in making this work.

Thanks!

Why not just use CSS class names that correspond with the tab names and access them directly, instead of by index? — Diodeus - James MacFarlane, Sep 03 '13 at 20:29
Diodeus, this is done dynamically. The application uses ATG, so the names of the tabs are fully customizable, even to the markup. — Jonathan Kempf, Sep 03 '13 at 21:05

score 1 · Accepted Answer · answered Sep 03 '13 at 20:35

1

Because you are already using jQuery consider solving the problem with it. Just use .eq method to get an access to the specific item in the list. For example:

var tabName = 'Product', tabType = window.location.pathname;
    if(tabType.indexOf('Product')>-1) tabName = 'Product'; 
    else if(tabType.indexOf('Business')>-1) tabName = 'Business'; 
    else if(tabType.indexOf('Support')>-1) tabName = 'Support';
    else if(tabType.indexOf('Article')>-1) tabName = 'Article';

var liTags = $('.category-tabs li');
liTags.removeClass('active');
for( var tn = 1; tn < liTags.length+1; tn ++ ){
    var li = liTags.eq(i);
    if(li.find('a').html().indexOf(tabName)>-1){
        li.addClass('active');
    } 
}

And try to cache the jQuery selections. It's just much cleaner and readable.

answered Sep 03 '13 at 20:35

Krasimir

13,306
3
40
55

Look at the original post: "$('.category-tabs li')" -- that *is* jQuery. – Diodeus - James MacFarlane Sep 03 '13 at 20:36
Exactly. I think that because he is already using jQuery he may use it for solving the problem and avoid the usage of css fancy selectors. – Krasimir Sep 03 '13 at 20:37
Krasimir, this worked for every nav tab except the first one (once I changed the integer "i" to the "tn"). Strangely enough, I am getting an undefined error on the line: if(li.find('a').html().indexOf(tabName)>-1){ Any clue why I am getting this, and why it is not working on the first nav tab? – Jonathan Kempf Sep 03 '13 at 21:19
I guess it is because the loop starts from 1. What is the result if you change it to *for( var tn = 0; tn < liTags.length; tn ++ ){* – Krasimir Sep 04 '13 at 05:58
Krasimir, that worked great. I guess I should have known, but thanks for all the help. – Jonathan Kempf Sep 04 '13 at 13:56

Re-write a Javascript function that selects active navigation tabs to work in IE8

1 Answers1