javascript - 重新编写一个选择事件导航选项卡以在 IE8 中工作的 Javascript 函数

Question

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

我打算使用 this在 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”，以便我可以使用 li:first-child + li 方法来模拟第 n 个 child ，但我真的可以使用一些帮助来完成这项工作。

谢谢!

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 选择。它更加清晰易读。