Выделение активного пункта меню. Нужен совет!
Доброго времени суток, форумчане!
Я нуб в java, нужен совет! Как в этот скрипт добавить border-color и color (цвет текста). Получилось добавить только background. <script> onload = function () {for (var lnk = document.links, j = 0; j < lnk.length; j++) if (lnk [j].href == document.URL)lnk [j].style.background = '#bba26c';} </script> Ну очень нужно (другого варианта выделения активного меню просто не нашел нигде). Заранее благодарен!!! |
Цитата:
б) Выделение пункта обычно делается присвоением особого класса, чаще всего active и прописыванием стилей в файле css. |
Да пробовал я и active и current и selected.
Ничего не получается. Только в данном скрипте есть положительные движения. Активный пункт меню выделяется, но только прописанный фон, а хотелось бы добавить к фону в скрипт border и color. Есть варианты решения? |
css:
.active{ background: #bba26c; color: red; border-color: blue; } lnk[i].className += ' active'; |
Воспользуйтесь jQuery :)
|
sphere89, это сарказм?
|
Цитата:
|
Цитата:
Может что в кодах не так!? HTML. <ul class="menu"> <li><a href="/index">Главная</a></li> <li><a href="/index/uslugi/0-7">Услуги</a></li> <li><a href="/index/nedvizhimost/0-9">Недвижимость</a></li> <li><a href="/index/contacts/0-6">Контакты</a></li> <li><a href="/index/zajavka/0-8">Оставить заявку</a></li> </ul> <div class="clear"></div> CSS. menu, .menu ul { padding : 0; list-style : none; } .menu { position : relative; width : 994px; height : 39px; margin : 0 auto; } .menu a:hover { background : #bba26c; border-color : #888 #777 #bba26c #555; color : #fff; } .menu ul li.active, .menu ul li a:hover { background : #bba26c; border-color : #888 #777 #bba26c #555; color : #fff; } .menu a:hover ul li a { line-height : 35px; height : 35px; float : none; } .menu ul li a { background : #bba26c; border-color : #888 #777 #444 #555; border-radius : 0 0 0 0; color : #000000; line-height : 1px; transition : 1.5s; } .menu ul { position : absolute; top : 37px; left : 0; height : 0; overflow : hidden; } .menu li { float : left; position : relative; background : transparent; } .menu li a { width : 138px; height : 37px; margin-left : 3px; background : #E6C98A; border-radius : 6px 6px 0 0; display : block; text-align : center; line-height : 35px; border : #8a8686 solid 1px; border-bottom-color : #fff; color : #000000; text-decoration : none; font-size : 12px; font-weight : bold; transition : 0.6s; } .menu ul li { width : 100%; opacity : 0; transition : 0.5s; } .menu li:hover ul li { opacity : 1; } .menu li:hover ul li a { line-height : 35px; |
Подключите после всего вашего кода тег <script></script> содержащий в цикле в теле условия эту строку lnk[i].className += ' active';
|
Цитата:
|
Часовой пояс GMT +3, время: 11:13. |