我有十二个<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;
}
提前致谢!
最佳答案
您可以在加载页面时运行一些 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;
}
关于CSS 选定/事件属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27302192/