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：悬停必须来自 a：link 和 a：visited 在CSS定义中才能有效。如果他们不按此顺序，则他们将无法工作。

其次，你必须明白，如果你在思考（a：active）意味着最终用户所在的当前链接的颜色，这是不正确的。（a：活动）在您单击链接时更改颜色。您可以通过按住与（a：active）不同颜色的链接上的鼠标按钮进行测试。

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

您的导航栏如下 - 首页
- 新闻
-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>

我希望我能给你一个坚实的答案。

激活时使链接成为不同的颜色

5 个答案: