2011-12-24 2 views
0

Я пытаюсь изменить цвет элемента в моей навигационной панели, чтобы дать эффект выбранной страницы при загрузке документа. Однако код, который я придумал (новый для JS), не работает; изменение цвета не происходит. Пожалуйста, скажите мне, где я ошибаюсь?Изменение цвета тега при загрузке документа

<script type="text/javascript"> 

     document.onLoad = (function() { 
      var nav = document.getElementById('textContainer'); 

      var navItems = nav.getElementsByTagName('a'); 

      var activeItem = navItems[0]; 

      activeItem.style.color = "#696969"; 
     }); 

</script> 

<div id="header"> 
    <a href="#"> 
    <div id="logo"></div> 
    </a> 
    <div id="navigation"> 
    <div id="textContainer"> 
     <h2><a href="#works">Works</a></h2> 
     <h2><a href="#blog">Blog</a></h2> 
     <h2><a href="#contact">Contact</a></h2> 
    </div> 
    </div> 
</div> 
+1

'window.onload = ....' должен Работа. –

ответ

2

Заменить document.onLoad с window.onload. Задача решена.

JavaScript не является HTML. Следовательно, он чувствителен к регистру. В HTML глобальные обработчики событий привязаны к <body>. В JavaScript глобальные методы должны быть определены на window.

Способы привязки слушатель события:

window.onload = function(){...};       // Works universally 
window.addEventListener("load", function(){...}, false); // @All decent browsers 
window.attachEvent("onload", function(){...});   // IE-only 
0

с JQuery:

$("#textContainer h2 a").first().css("color","green"); 
+1

OP не использует jQuery. – Blender

0

Вот полностью рабочий код

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
<script> 
$(document).ready(function() { 


     var nav = document.getElementById('textContainer'); 

     var navItems = nav.getElementsByTagName('a'); 

     var activeItem = navItems[0]; 

     activeItem.style.color = "#696969"; 
}); 
</script> 

<div id="header"> 
<a href="#"> 
<div id="logo"></div> 
</a> 
<div id="navigation"> 
<div id="textContainer"> 
    <h2><a href="#works">Works</a></h2> 
    <h2><a href="#blog">Blog</a></h2> 
    <h2><a href="#contact">Contact</a></h2> 
</div> 
</div> 
</div> 
+0

** Wat **? Добавление раздутой библиотеки, просто для простого события загрузки? Если вы действительно хотите перенести код в jQuery, правильным будет: '$ (function() {$ (" # textContainer a "). Eq (1) .css (" color "," # 696969 ")}); '. Но, как указал другой человек в другом комментарии, этот вопрос не является ** о jQuery. –

+0

Спасибо, но теперь это не отменяется, не могли бы вы взглянуть? http://jsfiddle.net/hJSrW/ –

Смежные вопросы