Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Выделение активного пункта меню. Нужен совет! (https://javascript.ru/forum/dom-window/42197-vydelenie-aktivnogo-punkta-menyu-nuzhen-sovet.html)

kirian222 16.10.2013 19:13

Выделение активного пункта меню. Нужен совет!
 
Доброго времени суток, форумчане!
Я нуб в 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>
Ну очень нужно (другого варианта выделения активного меню просто не нашел нигде).
Заранее благодарен!!!

danik.js 16.10.2013 19:16

Цитата:

Сообщение от kirian222
Ну очень нужно (другого варианта выделения активного меню просто не нашел нигде).

a) Выделение пункта должно происходить на сервере
б) Выделение пункта обычно делается присвоением особого класса, чаще всего active и прописыванием стилей в файле css.

kirian222 16.10.2013 19:51

Да пробовал я и active и current и selected.
Ничего не получается.
Только в данном скрипте есть положительные движения.
Активный пункт меню выделяется, но только прописанный фон, а хотелось бы добавить к фону в скрипт border и color.
Есть варианты решения?

danik.js 16.10.2013 20:02

css:
.active{
    background: #bba26c;
    color: red;
    border-color: blue;
}


lnk[i].className += ' active';

sphere89 16.10.2013 20:05

Воспользуйтесь jQuery :)

danik.js 16.10.2013 20:08

sphere89, это сарказм?

sphere89 16.10.2013 20:14

Цитата:

Сообщение от danik.js (Сообщение 276820)
sphere89, это сарказм?

Это совет новичку, намного проще работать с jQuery, чем с нативным JS.

kirian222 16.10.2013 20:14

Цитата:

Сообщение от danik.js (Сообщение 276816)
css:
.active{
    background: #bba26c;
    color: red;
    border-color: blue;
}


lnk[i].className += ' active';

Только что попробовал. Ничего глухо как на кладбище.
Может что в кодах не так!?
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;

sphere89 16.10.2013 20:16

Подключите после всего вашего кода тег <script></script> содержащий в цикле в теле условия эту строку lnk[i].className += ' active';

kirian222 16.10.2013 20:20

Цитата:

Сообщение от sphere89 (Сообщение 276826)
Подключите после всего вашего кода тег <script></script> содержащий в цикле в теле условия эту строку lnk[i].className += ' active';

Нифига не получается. Не хочет он выделятся.


Часовой пояс GMT +3, время: 07:26.