Question

我有12个<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代码。

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;
}

Answer 2

要在用户点击时为锚提供特殊类，可以使用简单的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"); });

确保您只有一个锚点，其中＆＃34;活跃＆＃34;我会做以下几点：

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

Answer 3

没有内置的方法可以知道哪个链接是当前链接。最简单的方法可能是使用javascript按document.URL检查当前网址，并将CSS类添加到具有相同href属性的链接。然后，您可以在CSS中设置此类的样式。

Answer 4

CSS不知道你在哪个页面。

为此，您必须更改HTML标记，例如：添加：

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

在相关链接上，您可以使用它来“挂钩”新的CSS样式：

.current-page { color: red; }

另一种方法是使用Javascript来“读取”URL并应用样式。

Answer 5

你可以......

只需在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;
}

如果您无权直接编辑每个页面，则可能需要动态检查URL，然后将类名（如“current”）添加到href属性匹配的锚标记中。

无论哪种方式，解决方案都不会涉及“仅限css”。

CSS选择/活动属性

5 个答案: