Javascript-форум - Выделение активного пункта меню. Нужен совет!

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)

Выделение активного пункта меню. Нужен совет!

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

Цитата:

Сообщение от kirian222

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

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

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

css:

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

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

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

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

Цитата:

Сообщение от danik.js (Сообщение 276820)

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

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

Цитата:

Сообщение от 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;

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

Цитата:

Сообщение от sphere89 (Сообщение 276826)

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

Там в css не .menu ul li, a .menu li

<!DOCTYPE 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>

<style>
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 li.active,
.menu 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;
}
</style>
<script>
(function(){
    var links = document.querySelectorAll('.menu a');
    for (var i = 0, link; link = links[i]; i++) {
        if (link.href == document.URL)
            link.className += ' active';
    }
})()
</script>

danik.js,
осталось выяснить что есть

Цитата:

Сообщение от danik.js

activeURL

Цитата:

Сообщение от рони

осталось выяснить что есть

Это недонажатый пару раз Ctrl+Z :)

kirian222

<style>
ul.menu li a{
 background-color : transparent;
 border-color : transparent;
 }
 ul.menu a.active,
 ul.menu a:hover {
 color: #fff!important;
 background-color : #bba26c!important;
 border-color : #888 #777 #bba26c #555!important;
 }
</style>
<ul class="menu">
 <li><a href="http://forumdts.org/search.php?action=show_24h">Главная</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>
<script>
(function(){
var links = document.querySelectorAll('.menu a');
for (var i = 0, link; link = links[i]; i++) {
 link.className = link.className.replace(/\s*active\s*/ig,'');
 //alert(link.href+'\n'+document.URL.split('#')[0]);
 if (link.href.split('#')[0] == document.URL.split('#')[0]){
    link.className += ' active';
 }
}
})()