html - 带有活动链接的简单水平菜单

Question

我无法将活动选项卡颜色添加到菜单代码中，任何人都可以在这方面帮助我。我从以下教程中收集了 css 水平代码：

http://www.freemenu.info/2013/04/menu.html

除了悬停颜色，我想要活动页面的另一种颜色。请帮我。

#menu a{
   display: block; padding: 5px 10px; 
   width: 100px; border-right: 2px solid #ffffff; 
   text-decoration: none;  border-left: 10px solid #1958b7;  
   color: #fff; background: #2175bc;
   }
#menu a:hover{
   color: pink; background: #2586d7;   
   border-left: 10px solid #1c64d1; 
   }

如何

Answer 1

为您的链接创建一个活动类（只需将该类添加到您的 :hover CSS）：

#menu a:hover,
#menu a.active {
    ....
}

现在你有如下链接：<a href="#" class="active">Link</a>

是这个问题吗？

Answer 2

您可以使用 javascript/JQuery 来做到这一点，（API 参考）：

$('#menu a').click(function(){
    $(this).addClass('selected');
    //Remove class for other menu items.
});

然后是更多的 CSS：

#menu a.selected{
   background: red; 
   }

Answer 3

这是我以前做的：

<li class="active"><a href="index.html">HOME</a></li>
<li><a href="about.html">ABOUT</a></li>
<li><a href="portfolio.html">PORTFOLIO</a></li>
<li><a href="contact.html">CONTACT</a></li>

更改所有页面的活动状态。然后在我的 CSS 中：

.active{
  //Your code goes here
}