css - 激活时使链接具有不同的颜色

Question

所有，我的导航菜单目前有以下 CSS：

#primary-menu, .default-menu, #mobile-menu-dropdown li, .site-navigation a {
  font-size: 32px;
}

然后我有以下 HTML 来显示菜单：

<nav id="primary-menu-container" role="navigation" class="site-navigation main-navigation clearfix">
<div class="menu-main-menu-container">
<ul id="primary-menu" class="menu">
<li id="menu-item-79" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-79"><a href="http://website.com/new_site/">Home</a></li>
<li id="menu-item-38" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-38"><a href="http://website.com/new_site/tagged?tag=news">News</a></li>
<li id="menu-item-69" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-69"><a href="http://website.com/new_site/tagged">Blog</a></li>
<li id="menu-item-71" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-71"><a href="http://website.com/new_site/music">Music</a></li>
<li id="menu-item-73" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-73"><a href="http://website.com/new_site/shows">Shows</a></li>
<li id="menu-item-75" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-75"><a href="http://website.com/new_site/photos">Photos</a></li>
<li id="menu-item-76" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-76"><a href="http://website.com/new_site/videos">Videos</a></li>
<li id="menu-item-113" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-113"><a href="http://website.com/new_site/faq">FAQ</a></li>
<li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21"><a href="http://website.com/new_site/contact">Contact</a></li>
</ul></div>             
</nav>

例如，当有人单击这些链接之一时，我想让链接处于活动状态并为 #FF0000 着色。我尝试了以下 CSS，但在新页面加载时它不保留颜色：

#primary-menu, .default-menu, #mobile-menu-dropdown li, .site-navigation a:active {
  color: #FF0000;
}

有人对如何使这项工作有任何想法吗？

编辑：我添加了一些 jQuery 作为 Explosion Pills 推荐。这个 jQuery 看起来像这样：

jQuery(".menu a").each(function () {
    if(jQuery(this).attr('href') === jQuery(location).attr('href')){
        if (jQuery(this).attr('title') === jQuery(this).text()) {
            alert("It is in here and the title is: " + jQuery(this).attr('title'));
            jQuery(this).css('color', '#FF0000');
        }
    }
});

它成功进入我的警报，但它没有将我指定的颜色应用于链接（它不会对任何链接执行此操作）

页面链接： http: //tinyurl.com/a7tpvwy

Answer 1

我假设您希望加载下一页，因此仅使用 CSS 是不可能的，因为 CSS 无法知道您在哪个页面上。您可以使用 JavaScript 解决方案来检查当前location是否等于任何链接的位置并将其突出显示为绿色，例如

Array.prototype.forEach.call(document.querySelectorAll('a'), function (elem) {
    if (elem.getAttribute('href') === window.location.pathname) {
        elem.style.color = '#FF0000';
    }
});

更简单的替代方法是在服务器端处理它。当您打印出标题链接时，请检查当前位置并设置链接的样式（如果有匹配项）。

编辑：jQuery 版本：

$("a").each(function () {
    if ($(this).attr('href') === window.location.pathname) {
        $(this).css('color', '#FF0000');
    }
});

Answer 2

一种设置链接样式的简单方法：

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

编辑：对不起，我错过了你说你希望新页面加载时颜色保持不变的部分。如前所述，您需要一些客户端/服务器端代码。

Answer 3

尝试.site-navigation:visited访问的链接。见这里：http: //jsfiddle.net/Kgxrw/

Answer 4

你的 CSS 没有做你认为的那样：

#primary-menu, .default-menu, #mobile-menu-dropdown li, .site-navigation a:active

逗号代表OR不AND

Answer 5

为了做你想做的事，你必须首先理解 a:hover 必须 在CSS 定义中的a:link和a:visited之后才能有效。如果它们不按此顺序，则它们将无法工作。

其次，您必须了解，如果您认为 (a:active) 是指最终用户所在的当前链接的颜色，这是不正确的。(a:active) 单击链接时会更改颜色。您可以通过在您使用 (a:active) 设置不同颜色的链接上按住鼠标按钮来测试这一点。

最后，如果您尝试仅使用 CSS 来执行此操作，则必须在最终用户所在的当前链接上添加一个特定的类。下面我给你一个例子希望这会有所帮助:)

您的导航栏如下-Home
-News
-Blog
-ect
...

我们在此示例的“博客”页面上：

 /*YOUR CSS SHOULD LOOK LIKE THIS*/
    /* Note: You can make these any colors you want *\

    /* unvisited link grey */
    #primary-menu-container a:link {
    	color: #777;
    }
    /* visited link grey */
    #primary-menu-container a:visited {
    	color: #777;
    }
    /* mouse over link blue */
    #primary-menu-container a:hover {
    	color: #0CF;
    }
    /* selected link blue */
    #primary-menu-container a:active {
    	color: #0CF;
    }
    /* !IMPORTANT ONLY ADD THIS CLASS TO YOUR ACTIVE PAGE LINK ( Color Blue )*/
    /* Note: You can make this any color you want */
    
    .activePage a {
    	color: #0CF !important
    }

<nav id="primary-menu-container" role="navigation">
<div class="menu-main-menu-container">
<ul id="primary-menu" class="menu">
<li id="menu-item-79" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-79"><a href="http://website.com/new_site/">Home</a></li>
<li id="menu-item-38" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-38"><a href="http://website.com/new_site/tagged?tag=news">News</a></li>
<li id="menu-item-69" class="activePage"><a href="http://website.com/new_site/tagged">Blog</a></li><!-- Notice the clase="activePage" -->
<li id="menu-item-71" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-71"><a href="http://website.com/new_site/music">Music</a></li>
<li id="menu-item-73" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-73"><a href="http://website.com/new_site/shows">Shows</a></li>
<li id="menu-item-75" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-75"><a href="http://website.com/new_site/photos">Photos</a></li>
<li id="menu-item-76" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-76"><a href="http://website.com/new_site/videos">Videos</a></li>
<li id="menu-item-113" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-113"><a href="http://website.com/new_site/faq">FAQ</a></li>
<li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21"><a href="http://website.com/new_site/contact">Contact</a></li>
</ul></div>             
</nav>

注意我没有在其他链接中放置 .activePage 标签？这样做是允许您在 css 中为导航栏选择的原始颜色仍然存在，而活动页面保持不变并具有不同的颜色。

之所以可行，是因为我在该单独类的颜色末尾添加了!important 。

.activePage {
      color: #0CF !important
    }

因此，要将相同的技术应用于您的其他页面，它看起来就像这样：

“主页”

 /*YOUR CSS SHOULD LOOK LIKE THIS*/
    /* Note: You can make these any colors you want *\

    /* unvisited link grey */
    #primary-menu-container a:link {
    	color: #777;
    }
    /* visited link grey */
    #primary-menu-container a:visited {
    	color: #777;
    }
    /* mouse over link blue */
    #primary-menu-container a:hover {
    	color: #0CF;
    }
    /* selected link blue */
    #primary-menu-container a:active {
    	color: #0CF;
    }
    /* !IMPORTANT ONLY ADD THIS CLASS TO YOUR ACTIVE PAGE LINK ( Color Blue )*/
    /* Note: You can make this any color you want */
    
    .activePage a {
    	color: #0CF !important
    }

 <nav id="primary-menu-container" role="navigation">
<div class="menu-main-menu-container">
<ul id="primary-menu" class="menu">
<li id="menu-item-79" class="activePage"><a href="http://website.com/new_site/">Home</a></li><!-- Notice the clase="activePage" -->
<li id="menu-item-38" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-38"><a href="http://website.com/new_site/tagged?tag=news">News</a></li>
<li id="menu-item-69" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-69"><a href="http://website.com/new_site/tagged">Blog</a></li>
<li id="menu-item-71" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-71"><a href="http://website.com/new_site/music">Music</a></li>
<li id="menu-item-73" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-73"><a href="http://website.com/new_site/shows">Shows</a></li>
<li id="menu-item-75" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-75"><a href="http://website.com/new_site/photos">Photos</a></li>
<li id="menu-item-76" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-76"><a href="http://website.com/new_site/videos">Videos</a></li>
<li id="menu-item-113" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-113"><a href="http://website.com/new_site/faq">FAQ</a></li>
<li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21"><a href="http://website.com/new_site/contact">Contact</a></li>
</ul></div>             
</nav>

我希望我给了你一个可靠的答案。