Как сделать так, чтобы панель активной страницы была выделена? - PullRequest
Новая
       2

Как сделать так, чтобы панель активной страницы была выделена?

0 голосов
/ 25 января 2020 

#menu ul{
margin:0px;
padding:0px;
list-style:none
}
#menu li a{
float:left;
display:inline-block;
width:210px;
margin:0px 0px 3px 0px;
background:#0093dd;
color:#fff;
border:5px solid #dd127b;
line-height:50px;
font-size:1.3em;
font-weight:bold;
letter-spacing:.1em;
text-transform:uppercase;
text-decoration:none
}
#menu li a:hover{
background:#fff;
color:#0093dd;
text-decoration:none
}
#menu li a:active{
background:#dd127b;color:#fff;
text-decoration:none
}
<div id="menu">
    <ul>
    <li><a href="..." title="...">...</a></li>
    <li><a href="..." title="...">...</a></li>
    <li><a href="..." title="...">...</a></li>
    <li><a href="..." title="...">...</a></li>
    <li><a href="..." title="...">...</a></li>
    </ul>
    </div>

Уважаемый разработчик, помогите, пожалуйста, сделать правильный код (без javascript) для выделения * активной страницы.

* background: #fff; color: # 0093dd; text-украшение: нет

Я думаю, что какая-то часть кода, которую я использую, неверна или неполна.

Использует существующие css и html кодировать каждая функция работает нормально, например, изменение цвета для фона и текста при наведении, изменение цвета для фона и текста при нажатии. Выделение активной панели страниц - единственная функция, которую я не могу заставить ее работать.

Это не навигационная панель родного блоггера. Это мини-приложение html, помещенное в заголовок сразу под заголовком #header (компания lo go).

1 Ответ

0 голосов
/ 26 января 2020

Короче говоря, вы должны использовать некоторые Javascript волхвы c: 1. Определить URL активной страницы с помощью объекта window.location 2. Найти соответствующий тег a с помощью var item =document.querySelector("a[href=<found url is here>]") 3. Добавить активный класс item.classList.add("active") 4. Опишите . active{...} класс у вас css код

...