Недавно на одном из форумов было обсуждение темы, выделения активного пункта меню. Большинство предложений сводилось к реализации данной функциональности на сервере. Но такой функционал можно реализовать и на стороне клиента и вот, что получилось.
JS код с использованием JQuery:
<script type="text/javascript">
$(document).ready(function() {
$('#menu').children('li').each(function(index, element) {
var url = window.location;
if($(element).find('a').attr('href') == url.protocol+'//'+url.location.host+url.pathname)
$(element).addClass('class', 'active');
});
});
</script>
Пояснение:
Скрипт рассчитан на случай, когда меню оформляется через списки и вложенные ссылки. В таблице стилей должен быть прописан класс .active.
Пример HTML:
<ul id="menu">
<li><a href="http://site.loc/menu1">Menu1</a></li>
<li><a href="http://site.loc/menu2">Menu2</a></li>
<li><a href="http://site.loc/menu3">Menu3</a></li>
<li><a href="http://site.loc/menu4">Menu4</a></li>
<li><a href="http://site.loc/menu5">Menu5</a></li>
</ul>