Почему CSS: активный по ссылке не делает выделение текущей ссылки на страницу?

Question

У меня есть следующий код ниже для списка в мастер-странице

<div id="header"> 
      <ul> 
       <li><a href="default.aspx">Home</a></li> 
       <li><a href="page1.aspx">Page1</a></li> 

      </ul> 
     </div>  ​ 

с CSS

#header a:hover { 
    color: #AA1111; 
    border-color: #AA1111; 
} 

#header a:active { 
    color: #AA1111; 
    border-color:#AA1111; 
} 

но ссылка не выделяет цветом, когда страница активируется.

Answer 1

:active не указывает, что ссылка будет подсвечена при активной текущей странице.

:active - состояние связи между щелчком мыши и мышью, выделенной по ссылке. Попробуйте прикоснуться к ссылке, чтобы убедиться сами.

Чтобы установить ссылку на текущую страницу в другом стиле, вам необходимо либо присвоить текущую ссылку на страницу другому классу, либо целевой класс в вашем CSS.

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

Answer 2

Я думаю, что вы путаете смысл псевдоселектора :active. Это правило css будет применяться, когда вы нажмете на ссылку. Но если эта ссылка приведет вас к новой странице, якорь больше не будет активен.

Что вам нужно сделать, это добавить класс к якорю в зависимости от того, на какой странице вы находитесь. Итак, в default.aspx вы должны убедиться, что у вас есть <a class="active" href="default.aspx">Home</a>. Затем вам нужно будет изменить правило css на #header a.active.

Answer 3

, как вы можете настроить вашу страницу:

#header li {} 
#header li.active a {color: #AA1111; border-color:#AA1111;} 


<div id="header"> 
     <ul> 
      <li class="active"><a href="default.aspx">Home</a></li> 
      <li><a href="page1.aspx">Page1</a></li> 

     </ul> 
</div> 

Вам нужно будет установить активный класс на li основе, на какой странице.

Демо: http://jsfiddle.net/lucuma/HT4U4/