CSS selected/active property

我有十二個<a href>鏈接，導致不同的類別。作爲用戶定位的手段，我想強調用戶現在正在使用的類別（<a href> -button）。CSS selected/active property

我該如何在CSS中實現這個功能？我讀了selected和active，但我還沒有能夠使它工作。

這是鏈接/按鈕之一：

<a href="index.php?category=handy&location=&sort="><span class="category_item"></span><span class="category_description">Handy & Co.</span></a>

相應的CSS：

.category_item { 
display:inline-block; 
background:url(../img/category_item/ph.png) no-repeat; 
width: 45px; 
height: 45px; 
margin-right: 11px; 
margin-bottom: 20px; 
} 

.category_item:hover { 
background:url(../img/category_item/hover.png); 
} 

.category_description { 
position: absolute; 
font-size: 11px; 
color: #000; 
margin-top: 43px; 
margin-left: -62px; 
z-index: 1; 
opacity: 0; 
}

預先感謝您！

來源

2014-12-04 Frank

需要比CSS以外的東西來做到這一點。有些東西必須將該類應用於將其設置爲當前頁面鏈接的鏈接。 – 2014-12-04 20:07:56

你可以運行一些jQuery代碼，當你加載頁面，檢查鏈接URL與當前頁面的URL，並在匹配的鏈接上設置一個類。

的jsfiddle：http://jsfiddle.net/og4o1tdh/2/

是這樣的：

HTML：

<div id="categories"> 
    <a href="www.google.com"><span class="category_description">Google</span></a> 
    <!-- jsfiddle code is apparently run on fiddle.jshell.net --> 
    <a href="fiddle.jshell.net"><span class="category_description">JSFiddle</span></a> 
</div>

JS：

$('#categories a').each(function(){ 
    var link = $(this).attr('href'); 
    if (window.location.href.indexOf(link) > -1) { 
     $(this).find('span').addClass('currentCategory'); 
    } 
});

CSS：

.currentCategory { 
    color: orange; 
    font-weight: bold; 
}

來源

2014-12-04 20:10:40 mikelt21

謝謝先生！你很棒！ – Frank 2014-12-04 20:31:17

只有一個問題：我怎麼能針對'span'（了'了'內），而不是整個'了'？ – Frank 2014-12-04 20:37:16

你可以做$（this）.find（'span'）。addClass（'currentCategory'）;'。我剛剛更新了我的答案以進行此更改。如果你想明確其添加到'category_description'跨度然後執行：'$（本）.find（ 'category_description。 '）addClass（' currentCategory'）;' – mikelt21 2014-12-04 20:54:32

當用戶點擊一個特殊的類時，可以使用簡單的javascript和jQuery。

給所有錨的，你想在這個例如一類範圍：

HTML：

<a class="nav-link" href="http://www.google.com"> Google </a> <a class="nav-link" href="http://www.yahoo.com"> Yahoo </a>

的Javascript：

$(".nav-link").on("click", function() { $(this).addClass("active"); });

爲了確保您只具有「主動」類中的一個錨我會做到以下幾點：

$(".nav-link").on("click", function() { $(".nav-link").removeClass("active"); $(this).addClass("active") });

來源

2014-12-04 19:27:53 Kennysmoothx

你可能不瞭解我的問題。只有當用戶當前位於錨點所在的頁面上時，錨點的樣式纔會有所不同。這樣用戶就知道他目前在哪個類別中。你知道我的意思嗎？ – Frank 2014-12-04 19:35:15

有知道哪個環節沒有內置的方式是當前一個。最簡單的方法可能是使用javascript通過document.URL來檢查當前URL，並將CSS類添加到具有相同href屬性的鏈接中。然後，你可以在CSS中設計這個類。

來源

2014-12-04 19:50:11

CSS不知道你在哪個頁面上。

要做到這一點，你必須改變你的HTML標記，例如：補充：

<a class="current-page" href="index.php?category=handy&location=&sort=" ...

相關鏈接，你可以用它來「鉤子」的新的CSS樣式到上：

.current-page { color: red; }

另一種方法是使用Javascript來「讀取」URL並應用樣式。

來源

2014-12-04 19:53:44

我正在尋找像'li.selected了'，爲此工作在我的網站另一個案例......只是增加了另一類不這樣做，因爲'color'將是'每red'情況，如果按鈕被點擊或不是 – Frank 2014-12-04 20:05:48

你可以...

獨特的類名只需添加到body標籤或（即圍繞錨標籤包裝一些元素）。然後相應地設計你的鏈接。如果你有機會改變你的網頁的HTML此選項是很容易的：

HTML

<body class="category_handy"> 
... 
<a href="..." class="category_handy"> 
<span class="category_item"></span> 
<span class="category_description">Handy & Co.</span> 
</a> 
.... 
</body>

CSS

body.category_handy a.category_handy { 
    color:red; 
} 
body.category_dandy a.category_dandy { 
    color:yellow; 
} 
body.category_something a.category_something { 
    color: blue; 
}

如果你沒有獲得直接編輯每個頁面，您可能需要動態查詢的網址，然後添加一個類名（如「電流」）筆o href屬性匹配的錨標籤。

無論哪種方式，該解決方案將不涉及「只有CSS」。

來源

2014-12-04 20:13:56 Larz

CSS selected/active property

回答

相關問題