Добавление селектора предков в этот javascript
Есть ли простой способ добавить немного о настройке предка 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>
3 ответа
Решение
Смотря что ты имеешь в виду. Я не получаю полную картину того, что происходит из вашего вопроса. Судя по всему, вы получаете элемент с идентификатором "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';
}
}
}
Ходить 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";
Я не проверял это или что-нибудь, но я думаю, что это будет работать:
<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>