CSS 选定/事件属性

Question

我有十二个<a href>指向不同类别的链接。作为用户定位的一种方式，我想强调用户现在所在的类别(<a href> - 按钮)。

如何在 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;
}

提前致谢!

Answer 1

您可以在加载页面时运行一些 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;
}