Question

是否有一种简单的方法可以添加一些关于将祖先li标记设置为.active的内容？

<script language="javascript" type="text/javascript">
function setActive() {
  aObj = document.getElementById('toc').getElementsByTagName('a');
  for(i=0;i<aObj.length;i++) { 
    if(document.location.href.indexOf(aObj[i].href)>=0) {
      aObj[i].className='active';
    }
  }
}
window.onload = setActive;
</script>

Answer 1

行走element.parentNode检查tagName.toLowerCase() == "li"以确定父<li>。然后设置className = "active"。

var parent = aObj[i].parentNode;
while (parent && parent.tagName.toLowerCase() != "li")
    parent = parent.parentNode;
if (parent) parent.className = "active";

Answer 2

我没有测试过它，但我认为这样可行：

<script language="javascript" type="text/javascript">
function setActive() {
  aObj = document.getElementById('toc').getElementsByTagName('a');
  for(i=0;i<aObj.length;i++) { 
    if(document.location.href.indexOf(aObj[i].href)>=0) {
      aObj[i].className='active';
    }
    var node = aObj[i];
    while(document != (node = node.parentNode)){
      if(node.tagName.toLowerCase() == 'li')
        node.className='active';
    }
  }
}
window.onload = setActive;
</script>

Answer 3

这取决于你的意思。我没有全面了解你的问题是怎么回事。从它的外观来看，你正在抓取一个id为“toc”的元素，所以我猜这个toc包含LI元素以及A元素。在这种情况下，您可以在getElementsByTagName中使用星号，这可能会更慢，具体取决于其他元素的数量。

function setActive() {
  var href = window.location + ''
    , el = document.getElementById('toc')
    , a = el.getElementsByTagName('*')
    , i = 0
    , l = a.length
    , name;

  for (; i < l; i++) { 
    el = a[i];
    name = el.nodeName.toLowerCase();
    if (name === 'li' || (name === 'a' 
        && ~href.indexOf(el.href))) {
      el.className = 'active';
    }
  }
}

如果您要求文档树中的祖先LI更高，那就是这样你想要：

function setActive() {
  var href = window.location + ''
    , el = document.getElementById('toc')
    , a = el.getElementsByTagName('a')
    , i = 0
    , l = a.length;

  // descendants
  for (; i < l; i++) { 
    if (~href.indexOf(a[i].href)) {
      a[i].className = 'active';
    }
  }

  // parents
  while (el = el.parentNode) {
    if (el.nodeName.toLowerCase() === 'li') {
      el.className = 'active';
    }
  }
}

将祖先选择器添加到此javascript

3 个答案: