无法为选定的 <a> 标签着色
Can't color a selected <a> tag
我正在制作完整的 javascript 菜单。
我正在尝试根据用户的 offsetTop 更改 <li>
或 <a>
项目的颜色。不懂就问我
菜单
var menu = document.getElementById('header');
var work = document.getElementById('work');
var who = document.getElementById('who');
var contact = document.getElementById('contact');
var offsetWork = work.offsetTop - 60;
var offsetWho = who.offsetTop - 60;
var offsetContact = contact.offsetTop - 60;
var ul = document.getElementsByTagName('ul')[0];
var li = ul.getElementsByTagName('li');
setInterval(function(){
var ul = document.getElementsByTagName('ul')[0];
var li = ul.getElementsByTagName('li');
if(getCurrPos() >= offsetWork){
menu.style.display = "block";
}else if(getCurrPos() <= offsetWork){
menu.style.display = "none";
}
if(offsetWork <= getCurrPos() <= offsetWho){
li[1].style.backgroundColor = '#00a9c6';
//li[1].getElementsByTagName('a').style.color = '#fff';
}else {
li[1].style.backgroundColor = '#fff';
}
if(offsetWho <= getCurrPos() <= offsetContact){
li[2].style.backgroundColor = '#00a9c6';
//li[2].getElementsByTagName('a').style.color = '#fff';
}else {
li[2].style.backgroundColor = '#fff';
}
if(getCurrPos() >= offsetContact){
li[3].style.backgroundColor = '#00a9c6';
//li[3].getElementsByTagName('a').style.color = '#fff';
}else {
li[3].style.backgroundColor = '#fff';
}
}, 100);
所有注释行都不起作用,我不知道为什么,因为它在执行 li[1].getElementsByTagName('a');
时找到了 [a] 项
感谢您的帮助,
Maël.
使用
li[3].querySelector('a').style.color = '#fff';
querySelector returns 选择器选择的所有元素中的第一个元素
getElementsByTagName return 与选择器匹配的所有元素的集合,因此您无法使用 li[2].getElementsByTagName('a').style.color
我正在制作完整的 javascript 菜单。
我正在尝试根据用户的 offsetTop 更改 <li>
或 <a>
项目的颜色。不懂就问我
菜单
var menu = document.getElementById('header');
var work = document.getElementById('work');
var who = document.getElementById('who');
var contact = document.getElementById('contact');
var offsetWork = work.offsetTop - 60;
var offsetWho = who.offsetTop - 60;
var offsetContact = contact.offsetTop - 60;
var ul = document.getElementsByTagName('ul')[0];
var li = ul.getElementsByTagName('li');
setInterval(function(){
var ul = document.getElementsByTagName('ul')[0];
var li = ul.getElementsByTagName('li');
if(getCurrPos() >= offsetWork){
menu.style.display = "block";
}else if(getCurrPos() <= offsetWork){
menu.style.display = "none";
}
if(offsetWork <= getCurrPos() <= offsetWho){
li[1].style.backgroundColor = '#00a9c6';
//li[1].getElementsByTagName('a').style.color = '#fff';
}else {
li[1].style.backgroundColor = '#fff';
}
if(offsetWho <= getCurrPos() <= offsetContact){
li[2].style.backgroundColor = '#00a9c6';
//li[2].getElementsByTagName('a').style.color = '#fff';
}else {
li[2].style.backgroundColor = '#fff';
}
if(getCurrPos() >= offsetContact){
li[3].style.backgroundColor = '#00a9c6';
//li[3].getElementsByTagName('a').style.color = '#fff';
}else {
li[3].style.backgroundColor = '#fff';
}
}, 100);
所有注释行都不起作用,我不知道为什么,因为它在执行 li[1].getElementsByTagName('a');
时找到了 [a] 项感谢您的帮助,
Maël.
使用
li[3].querySelector('a').style.color = '#fff';
querySelector returns 选择器选择的所有元素中的第一个元素
getElementsByTagName return 与选择器匹配的所有元素的集合,因此您无法使用 li[2].getElementsByTagName('a').style.color