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

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

我试过

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

{%if collection.handle='all%}
{%if linklists.sub-navigation.links.size>0%}{%if linklists.sub-navigation.links%}
{%excel-forloop.last%}{%endexcel%}{%endfor%}{%else%}
{%endif%}
{%endif%}
{%if collection.handle=='home%}
{%if linklists.sub-navigation-home.links.size>0%}
{%用于linklists.sub-navigation-home.links%中的链接}
{%Excelf-forloop.last%}{%EndExcelf%}{%endfor%}{%else%}
{%endif%}
{%endif%}
{%if collection.handle=='children%}
{%if linklists.sub-navigation-children.links.size>0%}{%if linklists.sub-navigation-children.links%}
{%Excelf-forloop.last%}{%EndExcelf%}{%endfor%}{%else%}
{%endif%}
{%endif%}
{%if collection.handle=='women%}
{%if linklists.sub-navigation-women.links.size>0%}{%if linklists.sub-navigation-women.links%}
{%Excelf-forloop.last%}{%EndExcelf%}{%endfor%}{%else%}
{%endif%}
{%endif%}
{%if collection.handle=='pets%}
{%if linklists.sub-navigation-pets.links.size>0%}{%if linklists.sub-navigation-pets.links%}
{%Excelf-forloop.last%}{%EndExcelf%}{%endfor%}{%else%}
{%endif%}
{%endif%}
{%if collection.handle=='gives%}
{%if linklists.sub-navigation-gifts.links.size>0%}{%if linklists.sub-navigation-gifts.links%}
{%Excelf-forloop.last%}{%EndExcelf%}{%endfor%}{%else%}
{%endif%}
{%endif%}
{%if collection.handle=='sale%}
{%if linklists.sub-navigation-sale.links.size>0%}{%if linklists.sub-navigation-sale.links%}
{%Excelf-forloop.last%}{%EndExcelf%}{%endfor%}{%else%}
{%endif%}
{%endif%}

您有一个小的打字错误-您应该有

a.active

而不是

a:active

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

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

你可以采取几种方法来做你想做的事情。将类添加到要标记为活动的链接是最明显的：

您的HTML：

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

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

---

检查其他方法，包括使用JavaScript的方法。我希望我正确地解释了您的问题

您可能需要使用一些javascript来完成此操作。可以通过以下方式检索当前URL：

  var url = document.URL;

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

e、 g

在元素之间循环可以这样做（我已经有一段时间没有使用jQuery了，所以我不知道这是如何跨浏览器的，但这是一个开始）：

---

因此，您可以安装jQuery并将其添加到页面的头部。它主要查看subnav div中的每个

元素，并将href属性与当前页面的URL进行比较，如果它们匹配，则对css进行更改。您可以修改所做的更改。

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

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

如果你把鼠标放在一个链接上，它就会变成石灰；如果你点击链接但不释放鼠标按钮，它会变成红色

另一种方法可能是使用Javascript/JQuery来实现这一点，我在这里演示了：

您可以使用JavaScript（）将

.current

添加到与当前URL匹配的锚定中

a.href

提供完整的URL，即使

[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进行样式设置：

。当前{color:orange}

您可以发布子AV中html的外观吗。这可能会影响建议的解决方案。这不是打字错误：）Shopify会自动将“活动”类添加到主集合链接，但不会自动将“活动”类分配给与子集合对应的链接。我尝试将css样式：active添加到链接中，以查看它是否会更改背景颜色，但没有成功。谢谢你！谢谢佐塔！已经有一个.active类，但我不知道如何使用Shopify将该类添加到与当前页面URL相对应的链接中。谢谢！我不太确定如何实现您提到的代码。你能解释一下我怎么能这样做吗？谢谢@Travis您有，还是愿意在项目中使用jQuery？如果是这样，那么你可以很容易地做到这一点。让我知道，我会发布一些代码。我愿意尽一切努力让背景颜色适合与当前URL匹配的链接。谢谢文森特！我在上面的答案中添加了一个应该会有帮助的abit。我在头代码中添加了以下内容，但它不起作用。我做错什么了吗？

  thelink.style.backgroundColor = "#F1F2F2";

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

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

//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));