重新编写一个Javascript函数，该函数选择活动的导航选项卡以在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!

Answer 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.