Как изменить цвет активной ссылки в меню

Вот меню HTML код для навигационной панели:Как изменить цвет активной ссылки в меню

<nav> 
     <div id="menu"> 
     <ul> 
       <li><a href="index.html">Home Page</a></li> 
      <li><a href="history.html">History</a></li> 
      <li><a href="events.html">Events</a></li> 
      <li><a href="inf.html">Information</a></li> 
      <li><a href="photo.html">Photos</a></li> 
      <li><a href="contact.html">Contact Us</a></li> 
      <li><a href="links.html">Useful Links</a></li> 
     </ul> 
    </div> 
</nav>

и вот код CSS:

nav{ 
float: left; 
margin-top: 15px; 
} 

nav ul { 
list-style: none; 
margin: 0; 
padding: 0px 0px 0px 0px; 

} 

nav li { 
display: inline-block; 

} 

nav a { 
padding: 8px 0px; 
margin-right:71px; 
color: #ffffff; 
display: block; 
text-decoration: none; 
text-transform: capitalize; 
font-size: 13px; 
} 

nav a:hover { 
color: #cccccc; 
}

Так, например, , если в настоящее время я просматриваю страницу истории, текст «История» на панели навигации будет красным. Как я могу это сделать?

@edit: Как указано в комментарии, я пытаюсь избежать jquery.

источник

2016-05-03 hDDen

У вас есть [тонна вопросов] (http://stackoverflow.com/search?q= [CSS] + % 22active + link% 22 +% 22color% 22) здесь по той же теме – sjsam

Возможный дубликат [Как изменить цвет тега активной ссылки] (http://stackoverflow.com/questions/19766144/how-to- change-the-color-of-an-active-link-tag) – sjsam

Я пытаюсь избежать jquery, так как я все еще новичок с html и css, и когда я искал темы, они состояли только из jquery. Надеюсь, это имеет смысл. – hDDen

Это отличный ресурс для начинающих: W3Schools

Эта страница на этом сайте, содержит ответ на ваш вопрос: CSS Text Formating

Я не 't означает быть неопределенным, но ваш вопрос немного неясен.

источник

2016-05-03 01:34:33 Jay5

Дэнни Праното получил правильную идею. Извините за недоумение :) Спасибо в любом случае – hDDen

-1

просто добавьте active имя класса в ссылке активного состояния.

<li><a href="index.html">Home Page</a></li> 
<li><a href="history.html">History</a></li> 
<li><a class="active" href="events.html">Events</a></li> 
<li><a href="inf.html">Information</a></li>

И в вашем CSS

nav a.active { 
    color: red; 
}

источник

2016-05-03 01:29:01

Вы можете сначала попросить оперу искать на сайте вопросы по той же теме. – sjsam

извините, сделаю это в следующий раз ... спасибо за предложение :) –

Точно, что мне нужно, спасибо. – hDDen

Вам нужно будет использовать jQuery для добавления класса active к тегу привязки, который соответствует странице, на которой вы находитесь. Как только это будет сделано, вы можете нарисовать его так: a.active {color:red}

Если это отдельные страницы HTML, вы можете просто вручную применить класс active к тегу привязки для этой страницы.

источник

2016-05-03 01:36:56 biggy09

Атрибут CSS, который вы описываете, является селектором CSS. Ваш CSS будет выглядеть следующим образом, который будет предназначаться все "активный" hrefs в меню DIV ID

#menu a:active { 
    color: blue; 
}

источник

2016-05-03 01:42:06 technology101010

Как изменить цвет активной ссылки в меню

ответ

Смежные вопросы