在「a」標籤中具有href =「＃」選項的菜單中突出顯示項目

我想製作將在主頁面上過濾列表的菜單。例如：在「a」標籤中具有href =「＃」選項的菜單中突出顯示項目

<div id="filters"> 
    <a href="#" id="all">Все</a> 
    <a href="#" id="top40">Топ-40</a> 
    <a href="#" id="top20">Топ-20</a> 
    <a href="#" id="top10">Топ-10</a> 
</div>

所以，問題是，我怎麼可以在這個菜單中選中活動項目。

幫助我，或者如果還有其他方法可以做，請出示。

感謝您的任何建議！

來源

2013-08-06 Shyngys Kassymov

無CSS解決方案 –

加js和jQuery爲突出活動的錨 –

什麼是有效的項目，時間和項目被認爲是積極的，沒有CSS的解決方案是有效的項目生成的服務器側面或用戶操作（例如）點擊使其活動？澄清PLZ – sakhunzai

你如何定義「主動」？

如果您的意思是您當前正在上空盤旋的人，你可以通過這樣做應用#filters a:hover規則。
如果您是指當前選定的頁面，則只能通過在「活動」鏈接中添加類名稱或者設置<body>的ID /類（也就是說，您可以基於在「當前」頁面）。

更新：這是一種使用JavaScript選擇鏈接的方法。

<script type="text/javascript"> 
    function select (x) 
    { 
    var a = document.getElementById ("filters").getElementsByClassName ("active"); 
    for (var i = 0; i < a.length; ++i) 
     a[i].className = ""; 
    x.className = "active"; 
    } 
</script> 

<a href="#" id="link1" onClick="select(this)">Foo</a> 
<a href="#" id="link2" onClick="select(this)">Baz</a> 
<a href="#" id="link3" onClick="select(this)">Bar</a>

來源

2013-08-06 05:35:47 Nerius

所以，據我所知，不鏈接到另一個頁面是不可能的？ –

我的意思是當前選擇的頁面，通過添加類'活躍' –

不，我的意思是第二個項目符號是，如果您目前在'all'頁面上，'Все'標籤也應該有一個類以區別於其他人，或者您可以爲''標籤添加ID /類，然後應用以下規則之一：＃＃過濾器a。或＃body.all #filters a。＃all'，'body.top240 #filters a。＃top240'，...。 – Nerius

你可以通過：focus狀態稍微實現這一點。

#filters a:focus { 
    color: red; 
}

這裏是一個JSFiddle作爲一個簡單的例子。這並不完美，但

來源

2013-08-06 06:01:29 BigToach

當我嘗試更改bakcgroundcolor或只是顏色時，不執行任何操作。 –

你看過小提琴嗎？ – BigToach

是的，但它僅適用於'輸入'標籤 –

這似乎並不清楚你實際上想要達到什麼。我似乎明白，您有一個菜單可以更改頁面上的內容，因此不會發生頁面重新加載，對嗎？但是，我仍然不清楚菜單是否過濾（顯示更少或更多）內容或切換內容。在第二種情況下，http://jqueryui.com/tabs/在我看來似乎是一個簡單的選擇（但也可以使用較少的代碼）。

茲的內容的演示的是它和菜單過濾：http://codecanyon.net/item/jquery-sort-and-order-portfolio-plugin/full_screen_preview/2669205

我希望你自己看着辦吧，也可以給出更多的信息。

更多的靈感：http://api.jquery.com/toggleClass/

$("#filters a").click(function() { $(this).toggleClass("active"); });

來源

2013-08-06 07:04:47 lijn

@Chika我很好奇你想達到什麼目的。如果它似乎沒有工作，請告訴我們。因此，我們可以提供更準確的線索或在線顯示/放置示例。「我們都犯錯了，我們都付出代價。」 ; ） – lijn

不，它適用於JS。所以我只是添加了Thanix顯示的一些.js代碼 –

在「a」標籤中具有href =「＃」選項的菜單中突出顯示項目

回答

相關問題