重新编写一个Javascript函数，该函数选择活动的导航选项卡以在IE8中工作

Question

我在最近的项目中继承了一些代码，该项目利用一些CSS3选择器将类添加到某些顶级选项卡导航中。 由于已在后端实现此方法，因此JS正在搜索window.location.pathname以匹配字符串，然后在另一个函数中使用该名称在DOM中添加类名。 第二个函数使用nth-child（x），其中x是一个循环，该循环对应于路径名和li中的适当匹配字符串。 但是，如您所知，IE8不支持nth-child。

我本来打算在IE8中使用这种模拟nth-child的风格，但是我不清楚如何编写函数以将其实际添加到现有代码中。

这是我引用的JS代码：

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');
    } 
}

我想添加一个使用此循环的函数，然后将其设置为等于“ li”，以便我可以使用模仿nth-child的li：first-child + li方法，但是我确实可以使用一些帮助使这项工作。

谢谢！

Answer 1

因为您已经在使用jQuery，请考虑解决它的问题。 只需使用.eq方法即可访问列表中的特定项目。 例如：

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');
    } 
}

并尝试缓存jQuery选择。 它更加清晰易读。