Главная > Javascript > javascript: выделение активного элемента списка

javascript: выделение активного элемента списка

18 сентября 2012 Написать комментарий К комментариям

Понадобилось для выделения активного элемента навигации по странице.
Скрипт в заголовке страницы (суть работы в том что по клику по ссылке активному элементу дописываем class active):

<script type="text/javascript">
	function RPClass(el) {
		var nav=document.getElementById('nav');
		var links=nav.getElementsByTagName('li');
		for (var i=0;i<links.length;i++) {
			var li=links[i];
			li.className='';
		}
		el.className = 'active';
	}
</script>

Собственно список:

<ul id='nav'>
	<li onclick='RPClass(this);'><a href='#1'>1</a></li>
	<li onclick='RPClass(this);'><a href='#2'>2</a></li>
	<li onclick='RPClass(this);'><a href='#3'>3</a></li>
	<li onclick='RPClass(this);'><a href='#4'>4</a></li>
	<li onclick='RPClass(this);'><a href='#5'>5</a></li>
</ul>

Пример CSS для горизонтального меню с выделением активного элемента рамкой и фоном:

#nav {
	list-style:none;
}
#nav li {
	float:left;
	padding:10px;
	border:1px solid #ffffff;
	margin-right:4px;
}
#nav li:hover, #nav li.active{
	border:1px solid #505050;
	background:#dddddd;
}
#nav li a {
	color:#505050;
	text-decoration:none;
}
Categories: Javascript Tags:
  1. Пока что нет комментариев.
Похожие публикации