活动导航栏链接答案

【问题标题】：Active Navbar Link活动导航栏链接
【发布时间】：2015-01-09 14:53:00
【问题描述】：

我的网站内有正常的链接状态和悬停状态，但由于某种原因活动状态不起作用，为什么这不起作用。有人可以帮忙吗。我希望在活动状态下，该链接不会变回原来的颜色。

         ul#menu li a {
        text-decoration: none;
        font-family:'Novecento Sans W01 Lt';
        font-size:14px;
        color:white;
        background-color: #223e99 ;
        border-left:solid;
        border-left-color: #223e99 ;
        border-right:solid;
        border-right-color: #223e99 ;
        border-left-width:32px;
        border-right-width:32px;
        border-top:solid;
        border-top-color:#223e99 ;
        border-top-width:15px;
        border-bottom:solid;
        border-bottom-color:#223e99 ;
        border-bottom-width:15px;
        margin-left:-18px;


    }

    ul#menu li a:hover {
        text-decoration: none;
        font-family:'Novecento Sans W01 Lt';
        font-size:14px;
        color:white;
        background-color: #7fc14b ;
        border-left:solid;
        border-left-color: #7fc14b ;
        border-right:solid;
        border-right-color: #7fc14b ;
        border-left-width:32px;
        border-right-width:32px;
        border-top:solid;
        border-top-color:#7fc14b ;
        border-top-width:15px;
        border-bottom:solid;
        border-bottom-color:#7fc14b ;
        border-bottom-width:15px;
        margin-left:-18px;
    }


    ul#menu li a:active{
        text-decoration: none;
        font-family:'Novecento Sans W01 Lt';
        font-size:14px;
        color:white;
        background-color: #7fc14b ;
        border-left:solid;
        border-left-color: #7fc14b ;
        border-right:solid;
        border-right-color: #7fc14b ;
        border-left-width:32px;
        border-right-width:32px;
        border-top:solid;
        border-top-color:#7fc14b ;
        border-top-width:15px;
        border-bottom:solid;
        border-bottom-color:#7fc14b ;
        border-bottom-width:15px;
        margin-left:-18px;
    }

【问题讨论】：

不是:visited而不是: active 被点击的链接的伪类吗？
是的@Huey，活动是当鼠标（或手指）点击并在按钮（或手指）释放后立即被移除。但我认为张贴者想要的只是在你在那个页面上时给它一个颜色。
在这种情况下，单靠 CSS 是行不通的。您需要将 :active 代码放在一个单独的类中，该类添加后端或通过 js。
我该怎么做？
@Martin 下面有一些答案，现在大约六周了。他们中的任何一个有帮助吗？如果是这样，请考虑接受对您最有帮助的那个。

标签： css menu state navbar

【解决方案1】：

active 状态可能与您想象的有些不同。链接/按钮或元素在您单击它的那一刻就处于活动状态。当您释放鼠标按钮时，它会失去其活动状态。

我相信您正在寻找的是 :visited 伪类，它标记了您过去访问过的链接（浏览器仍然可以记住它；）），或者您正在寻找一个自定义的 .active 类（只需创建您自己的 css 类名称），它指定/突出显示您的用户当前正在访问的页面。

编辑一段代码来演示。

假设您有一个菜单，顶部导航链接指向您的主页、新闻部分、关于和联系页面：

<ul id="menu">
    <li><a href="/">Home</a></li>
    <li><a href="/news">News</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
</ul>

最初它们看起来都一样。如果您将鼠标悬停在它们上方，它们看起来会有所不同（您已经使用自己的 css 实现了这一点）。

现在让我们假设您的访问者当前正在访问关于页面，并且您希望在菜单中突出显示该页面。在这种情况下，您只需将一个类添加到特定的 <li>，并为您的样式表添加一些样式：

<ul id="menu">
    ...
    <li class="active"><a href="/about"></a></li> <!-- Note the 'class="active"' in the <li> element
    ...
</ul>

ul#menu li.active a { color: red; }

在上面的示例中，About 链接将采用红色字体颜色。根据您的需要应用样式。不要退缩！由于您的 css 样式是级联的（名称中有什么...），您可以覆盖您想要的每一个属性。

【讨论】：

【解决方案2】：

您需要注意:active 和:visited 之间的区别。

:active 在您单击链接时显示，并且仅在您单击时显示，而:visited 显示在您已经看到的链接上。

另外，您应该清理 CSS。你有很多重复。一旦你在ul#menu li a 中声明了font-family 和font-size 之类的东西，你就不需要在ul#menu li a:hover、ul#menu li a:active 和ul#menu li a:visited 中重复它们，除非它们改变了。

我冒昧地更新了您的 CSS 以向您展示：

ul#menu li a {
    text-decoration: none;
    font-family: 'Novecento Sans W01 Lt';
    font-size: 14px;
    color: white;
    background-color: #223e99 ;
    border-left: solid;
    border-left-color: #223e99 ;
    border-right: solid;
    border-right-color: #223e99 ;
    border-left-width: 32px;
    border-right-width: 32px;
    border-top: solid;
    border-top-color: #223e99 ;
    border-top-width: 15px;
    border-bottom: solid;
    border-bottom-color: #223e99 ;
    border-bottom-width: 15px;
    margin-left: -18px;
}

ul#menu li a:hover, 
ul#menu li a:active, 
ul#menu li a:visited, {
    background-color: #7fc14b ;
    border-left-color: #7fc14b ;
    border-right-color: #7fc14b ;
    border-top-color: #7fc14b ;
    border-bottom-color: #7fc14b ;
}

如果你想让它更容易阅读，你可以使用简写声明，如下所示：

ul#menu li a {
    text-decoration: none;
    font-family: 'Novecento Sans W01 Lt';
    font-size: 14px;
    color: white;
    background-color: #223e99;
    border: 32px solid #223e99;
    border-top-width: 15px;
    border-bottom-width: 15px;
    margin-left: -18px;
}

ul#menu li a:hover, 
ul#menu li a:active, 
ul#menu li a:visited, {
    background-color: #7fc14b ;
    border-color: #7fc14b ;
}

你可以在CSS Schools阅读更多关于边框速记的信息

【讨论】：

这同样适用于字体和背景定义顺便说一句：font: 14px 'Novecento Sans W01 Lt'; background: #223e99; 。仅当您需要具体时才具体（或者如果您喜欢打字，但在这种情况下您选择了错误的职业）

【解决方案3】：

试试这些

像这样按层次结构给出 css：

.main_class .2class ul#menu li a { /* your css here */ }

或

#main_class #2_class ul#menu li a { /* your css here */ }

示例：

.container .site_content ul#menu li a {
    /* your css */
}

.container .site_content ul#menu li a:hover {
    /* your css */
}

.container .site_content ul#menu li a:active {
    /* your css */
}

【讨论】：