Question

我想将CSS背景颜色添加到侧栏导航（#subnav）中与当前URL完全匹配的任何链接。

我已经尝试了div#subnav a:active { background: #f1f2f2; }，但它没有用。

任何帮助将不胜感激！

更新： subnav的代码如下：

<!-- START ALL PRODUCTS SUBNAV -->
{% if collection.handle == 'all' %}
<div id="back_link"><a style="background: none; color: #fff;" href="/collections/all">.</a></div>
<div id="subnav" style="margin-top: -33px;">{% if linklists.sub-navigation.links.size > 0 %}{% for link in linklists.sub-navigation.links %}
<li class="main_category_link"><a href="{{ link.url }}"{% if link.url == collection.url %} class="active"{% endif %}>{{ link.title | escape }}</a></li>{% unless forloop.last %} {% endunless %}{% endfor %}{% else %}
{% endif %}
</div>
{% endif %}
<!-- END ALL PRODUCTS SUBNAV -->

<!-- START HOME SUBNAV -->
{% if collection.handle == 'home' %}
<div id="back_link"><a href="#" onclick="history.go(-1);return false;">&larr; BACK</a></div>

<div id="subnav">
<div class="main_category_link"><a href="/collections/home">HOME</a></div>
{% if linklists.sub-navigation-home.links.size > 0 %}
{% for link in linklists.sub-navigation-home.links %}
<li><a href="{{ link.url }}"{% if link.url == collection.url %} class="active"{% endif %}>{{ link.title | escape }}</a></li>{% unless forloop.last %} {% endunless %}{% endfor %}{% else %}
{% endif %}
<div class="main_category_link"><a href="/collections/children">CHILDREN</a></div>
<div class="main_category_link"><a href="/collections/women">WOMEN</a></div>
<div class="main_category_link"><a href="/collections/pets">PETS</a></div>
<div class="main_category_link"><a href="/collections/gifts">GIFTS</a></div>
<div class="main_category_link"><a style="margin-bottom: 0;"href="/collections/sale">SALE</a></div>
</div>
{% endif %}
<!-- END HOME SUBNAV -->

<!-- START CHILDREN SUBNAV -->
{% if collection.handle == 'children' %}
<div id="back_link"><a href="#" onclick="history.go(-1);return false;">&larr; BACK</a></div>
<div id="subnav">
<div class="main_category_link"><a href="/collections/home">HOME</a></div>
<div class="main_category_link"><a href="/collections/children">CHILDREN</a></div>
{% if linklists.sub-navigation-children.links.size > 0 %}{% for link in linklists.sub-navigation-children.links %}
<li><a href="{{ link.url }}"{% if link.url == collection.url %} class="active"{% endif %}>{{ link.title | escape }}</a></li>{% unless forloop.last %} {% endunless %}{% endfor %}{% else %}
{% endif %}
<div class="main_category_link"><a href="/collections/women">WOMEN</a></div>
<div class="main_category_link"><a href="/collections/pets">PETS</a></div>
<div class="main_category_link"><a href="/collections/gifts">GIFTS</a></div>
<div class="main_category_link"><a style="margin-bottom: 0;" href="/collections/sale">SALE</a></div>
</div>
{% endif %}
<!-- END CHILDREN SUBNAV -->

<!-- START WOMEN SUBNAV -->
{% if collection.handle == 'women' %}
<div id="back_link"><a href="#" onclick="history.go(-1);return false;">&larr; BACK</a></div>
<div id="subnav">
<div class="main_category_link"><a href="/collections/home">HOME</a></div>
<div class="main_category_link"><a href="/collections/children">CHILDREN</a></div>
<div class="main_category_link"><a href="/collections/women">WOMEN</a></div>
{% if linklists.sub-navigation-women.links.size > 0 %}{% for link in linklists.sub-navigation-women.links %}
<li><a href="{{ link.url }}"{% if link.url == collection.url %} class="active"{% endif %}>{{ link.title | escape }}</a></li>{% unless forloop.last %} {% endunless %}{% endfor %}{% else %}
{% endif %}
<div class="main_category_link"><a href="/collections/pets">PETS</a></div>
<div class="main_category_link"><a href="/collections/gifts">GIFTS</a></div>
<div class="main_category_link"><a style="margin-bottom: 0;" href="/collections/sale">SALE</a></div>
</div>
{% endif %}
<!-- END WOMEN SUBNAV -->

<!-- START PETS SUBNAV -->
{% if collection.handle == 'pets' %}
<div id="back_link"><a href="#" onclick="history.go(-1);return false;">&larr; BACK</a></div>
<div id="subnav">
<div class="main_category_link"><a href="/collections/home">HOME</a></div>
<div class="main_category_link"><a href="/collections/children">CHILDREN</a></div>
<div class="main_category_link"><a href="/collections/women">WOMEN</a></div>
<div class="main_category_link"><a href="/collections/pets">PETS</a></div>
{% if linklists.sub-navigation-pets.links.size > 0 %}{% for link in linklists.sub-navigation-pets.links %}
<li><a href="{{ link.url }}"{% if link.url == collection.url %} class="active"{% endif %}>{{ link.title | escape }}</a></li>{% unless forloop.last %} {% endunless %}{% endfor %}{% else %}
{% endif %}
<div class="main_category_link"><a href="/collections/gifts">GIFTS</a></div>
<div class="main_category_link"><a style="margin-bottom: 0;" href="/collections/sale">SALE</a></div>
</div>
{% endif %}
<!-- END PETS SUBNAV -->

<!-- START GIFTS SUBNAV -->
{% if collection.handle == 'gifts' %}
<div id="back_link"><a href="#" onclick="history.go(-1);return false;">&larr; BACK</a></div>
<div id="subnav">
<div class="main_category_link"><a href="/collections/home">HOME</a></div>
<div class="main_category_link"><a href="/collections/children">CHILDREN</a></div>
<div class="main_category_link"><a href="/collections/women">WOMEN</a></div>
<div class="main_category_link"><a href="/collections/pets">PETS</a></div>
<div class="main_category_link"><a href="/collections/gifts">GIFTS</a></div>
{% if linklists.sub-navigation-gifts.links.size > 0 %}{% for link in linklists.sub-navigation-gifts.links %}
<li><a href="{{ link.url }}"{% if link.url == collection.url %} class="active"{% endif %}>{{ link.title | escape }}</a></li>{% unless forloop.last %} {% endunless %}{% endfor %}{% else %}
{% endif %}
<div class="main_category_link"><a style="margin-bottom: 0;" href="/collections/sale">SALE</a></div>
</div>
{% endif %}
<!-- END GIFTS SUBNAV -->

<!-- START SALE SUBNAV -->
{% if collection.handle == 'sale' %}
<div id="back_link"><a href="#" onclick="history.go(-1);return false;">&larr; BACK</a></div>
<div id="subnav">
<div class="main_category_link"><a href="/collections/home">HOME</a></div>
<div class="main_category_link"><a href="/collections/children">CHILDREN</a></div>
<div class="main_category_link"><a href="/collections/women">WOMEN</a></div>
<div class="main_category_link"><a href="/collections/pets">PETS</a></div>
<div class="main_category_link"><a href="/collections/gifts">GIFTS</a></div>
<div class="main_category_link"><a style="margin-bottom: 0;" href="/collections/sale">SALE</a></div>
{% if linklists.sub-navigation-sale.links.size > 0 %}{% for link in linklists.sub-navigation-sale.links %}
<li><a href="{{ link.url }}"{% if link.url == collection.url %} class="active"{% endif %}>{{ link.title | escape }}</a></li>{% unless forloop.last %} {% endunless %}{% endfor %}{% else %}
{% endif %}
</div>
{% endif %}
<!-- END SALE SUBNAV -->

Answer 1

：active 属性不是您认为的那样。在CSS世界中，一旦您点击它，链接就会变为活动状态。当然，这会将您带到它链接到的页面，因此实际上链接在很短的时间内处于活动状态。

您可以采取多种方法来做您想做的事。在要标记为活动的链接中添加一个类是最明显的一个：

您的HTML：

<a href="link.html">Link1</a>
<a href="link.html" class="active">Link2</a>
<a href="link.html">Link3</a>

你的CSS：

.active {
    font-weight: bold;
}

这样活动链接变为粗体。当然这必须在服务器端完成。

检查here是否有其他方法，包括使用JavaScript的方法

Answer 2

我希望我正确地解释你的问题。

您可能需要使用一些JavaScript才能完成此操作。可以使用以下命令检索当前URL：

  var url = document.URL;

然后，您可以将其与所有链接循环中每个链接的值进行比较。当您找到与该网址具有相同值的网址时，您会添加一些CSS来更改颜色。

e.g。

  thelink.style.backgroundColor = "#F1F2F2";

循环遍历这些元素可能就像这样（已经有一段时间了，因为我没有jQuery这样做，所以我不知道这是什么交叉浏览器，但它是一个开始。 ）：

  var links = document.getElementById('subnav').elements;
  for(var i = 0; i < links.length; i++)
    {
          if(links[i].getAttribute('href') === url){
              links[i].style.backgroundColor = "#F1F2F2";
          }
    }

因此，假设您在subnav div中有一堆<a>元素，这将通过它们并将它们与当前页面的url进行比较并相应地更改颜色。这可以放在一个绑定到页面的onload事件的函数中。

更好的是，使用jQuery来简化代码并使其在多个浏览器中更安全。

鉴于您的评论如下，那么这个jQuery解决方案如何：

   $(document).ready(function(){
    $("#subnav a").each(function(){
        if($(this).attr('href') == document.URL){
            $(this).css("background-Color", "red");
        }
    });
   });

因此，您可以安装jQuery并将其添加到页面的头部。它基本上查看subnav div中的每个<a>元素，并将href属性与当前页面的URL进行比较，如果匹配则对css进行更改。您可以修改所做的更改。

Answer 3

您可以使用JavaScript（gist）将.current添加到与当前网址匹配的锚点。即使a.href属性是相对的，[href]也会提供完整的网址。

//gist.github.com/ryanve/6153436
(function(anchors, url, i, a) {
  while ((a = anchors[i++]) && a.classList)
    a.href === url && a.classList.add('current');
}(document.getElementsByTagName('a'), location.href, 0));

然后你可以通过CSS设置样式：.current { color:orange }

Answer 4

你有一个小错字 - 而不是a:active，你应该有a.active

div#subnav a.active {background: #f1f2f2;}

Answer 5

我认为Active伪类不会这样做 - Active表示当前选定的链接，因此如果将鼠标悬停在链接上并单击而不释放鼠标按钮，则会应用“活动”样式。

我在这里做了一个小提示：

http://jsfiddle.net/39DuU/

如果你将鼠标悬停在一个链接上它就会变成Lime;如果你点击链接但没有释放鼠标按钮就会变红。

替代方案可能是使用Javascript / JQuery实现这一点，我已在此处演示过：

http://jsfiddle.net/39DuU/1/

如何设置与当前URL匹配的链接的样式？

5 个答案: