制作链接不同的颜色，当活跃

所有，我目前得到了下面的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作为推荐的爆炸药。这个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

来源

2013-03-02 user1048676

我快速浏览了你的页面。在theme.css中，颜色被！重要属性（我认为是949行）覆盖。除了我的头，我认为最好的解决方案是专门为'主动'链接编写一个css类，然后使用JQuery来应用该类。 – Krayg 2013-03-02 17:45:53

我假设你要下一个页面加载，所以这是不可能纯粹用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'); 
    } 
});

来源

2013-03-02 16:43:10

有没有办法让这个jQuery或将这与jQuery的工作？ – user1048676 2013-03-02 17:00:49

@ user1048676 jQuery只是JavaScript，所以它当然会“使用jQuery”。我在回答中添加了jQuery版本 – 2013-03-02 17:09:07

谢谢！我更新了我的问题，因为我得到了jQuery的工作，但它没有将CSS颜色应用于活动链接。任何想法有什么不对？ – user1048676 2013-03-02 17:25:22

尝试.site-navigation:visited为访问过的链接。在这里看到：http://jsfiddle.net/Kgxrw/

来源

2013-03-02 16:43:45 Muhambi

这是行不通的。我只想要活跃的一个。那个突出显示他们将点击并且不重置的每个链接。 – user1048676 2013-03-02 16:52:07

@ user1048676，糟糕。误解了我猜的问题。 – Muhambi 2013-03-02 17:02:33

你的CSS是不是做你认为它是：

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

的逗号代表OR不AND

来源

2013-03-02 16:44:04

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

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

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

来源

2013-03-02 16:50:10 Krayg

为了做什么你正在尝试做的，你必须首先了解：悬停必须来一后：链接和一：在CSS定义，以便访问是有效的。如果他们不是这样的顺序，那么他们将无法工作。

其次，你必须明白，如果你认为（a：active）意思是最终用户所在当前链接的颜色，这是不正确的。（a：active）会在点击链接时改变颜色。您可以通过按住链接上的鼠标按钮来测试此功能，该链接使用（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 { 
 
    \t color: #777; 
 
    } 
 
    /* visited link grey */ 
 
    #primary-menu-container a:visited { 
 
    \t color: #777; 
 
    } 
 
    /* mouse over link blue */ 
 
    #primary-menu-container a:hover { 
 
    \t color: #0CF; 
 
    } 
 
    /* selected link blue */ 
 
    #primary-menu-container a:active { 
 
    \t 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 { 
 
    \t 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中为您的导航栏选择的原始颜色仍可以在活动页面以不同颜色保持稳定的情况下发生。

这个工作的原因是因为我在该单独的类的颜色末尾添加了！重要的。

.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 { 
 
    \t color: #777; 
 
    } 
 
    /* visited link grey */ 
 
    #primary-menu-container a:visited { 
 
    \t color: #777; 
 
    } 
 
    /* mouse over link blue */ 
 
    #primary-menu-container a:hover { 
 
    \t color: #0CF; 
 
    } 
 
    /* selected link blue */ 
 
    #primary-menu-container a:active { 
 
    \t 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 { 
 
    \t 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>

我希望我给你对你的问题有一个确凿的答案。

来源

2014-09-22 07:52:00

制作链接不同的颜色，当活跃

回答

相关问题