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 Reference）：

来做到这一点

$('#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
}

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

3 个答案: