2017-01-09 5 views
2

전체 자바 스크립트 메뉴로 작업 중입니다.선택할 수 없음 <a> 태그

사용자의 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); 

모든 주석 라인이없는 작업을 수행하고 내가 아는하지 않는 이유 리를 할 때 그것은 [A] 항목을 찾을 수 있기 때문에 [1] .getElementsByTagName ('A') ;

감사합니다.

Maël.

+3

.getElementsByTagName '('A ') style.color ='#fff '를 교체한다]. .getElementsByTagName'와 '('A ') [0] .style.color = '#fff ';'Remember'getElementsByTagName ('a ')'는 앵커 요소의 컬렉션을 나타내는 NodeList 객체를 반환합니다. – NewToJS

+0

[querySelectorAll, getElementsByClassName 및 기타 getElementsByClassName은 무엇을 반환합니까?] (http://stackoverflow.com/questions/10693845/what-do-queryselectorall-getelementsbyclassname-and-other-getelementsby-method) – ValLeNain

+0

감사합니다. 많은 NewToJS, 나는 리튬에 그것을 사용하지만 a에, 내 나쁜 아 아! –

답변

0

사용

li[3].querySelector('a').style.color = '#fff'; 

querySelector 첫번째 요소 따라서는 구 등을 요소에 액세스 할 수있는 선택기 일치하는 모든 요소의 집합체를 반환 getElementsByTagName 셀렉터

의해 선택된 모든 요소 내에 리턴 . [2] .getElementsByTagName ('A') style.color

+0

팁 주셔서 감사합니다! 나는 꽤 JS 새로운 :) –