Выделение активного пункта меню с помощью JavaScript

Рано или поздно мы сталкиваемся с задачей выделить активную ссылку в меню сайта или еще где либо.

Решение на самом деле очень простое, и выполняется на чистом js:

Пишем внутри тега такую функцию (ну или можно занести это в файл и подключить сам файл):

<script type="text/javascript">
    function shineLinks(id){
        try{
            var el=document.getElementById(id).getElementsByTagName('a');
            var url=document.location.href;
            for(var i=0;i<el.length; i++){
                if (url==el[i].href){
                    el[i].className += ' act';
                };
            };
        }catch(e){}
    };
</script>

Допустим у нас на сайте есть меню такого вида:

<div class="menu">

    <ul>
        <li style="list-style-type: none;">
        <li><a href="/">Главная</a></li>
        <li><a href="/about/">О компании</a></li>
        <li><a href="/contacts/">Контакты</a></li>
    </ul>
</div>

Присвоим диву id, который назовём как душе угодно, например menu-act, и после закрытия дива, делаем вызов функции:

<div class="menu" id="menu-act">
    <ul>
        <li><a href="/">Главная</a></li>
        <li><a href="/about/">О компании</a></li>
        <li><a href="/contacts/">Контакты</a></li>
    </ul>
</div>
<script type="text/javascript">shineLinks('menu-act');</script>

Суть работы заключается в следующем: перебираются все ссылки в меню, и сравниваются с текущим url, если совпадают, то для ссылки добавляется класс act

например:

<ul>
 	<li><a class=" act" href="/about/">О компании</a></li>
</ul>

Почему стоит пробел перед act: если у ссылки нет класса, то на валидность это никак влиять не будет, а если у ссылки уже есть класс например link, то что бы не было linkact, добавляется еще один класс через пробел. Остаётся только прописать соответствующие стили в css.

Всё элементарно.