製作鏈接不同的顏色，當活躍

所有，我目前得到了下面的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

製作鏈接不同的顏色，當活躍

回答

相關問題