0

我在最近的一个项目中继承了一些代码，该项目使用一些 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 方法，但我真的可以使用一些帮助在做这项工作。

谢谢！

4

1 回答 1

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 选择。它只是更清洁和可读。

于 2013-09-03T20:35:33.223 回答