如何设置与当前 URL 匹配的链接样式？ [复制]答案

【问题标题】：How to style a link that matches the current URL? [duplicate]如何设置与当前 URL 匹配的链接样式？ [复制]
【发布时间】：2012-04-03 02:05:38
【问题描述】：

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

我试过div#subnav a:active { background: #f1f2f2; }，但没用。

任何帮助将不胜感激！

更新：子导航的代码如下：

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

【问题讨论】：

你能在 subnav 中发布 html 的样子吗？这可能会影响建议的解决方案。

标签： css url hyperlink

【解决方案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 的方法

【讨论】：

感谢乔塔！已经有一个 .active 类，但我不知道如何使用 Shopify 将该类添加到与当前页面 URL 对应的链接。

【解决方案2】：

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

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

  var url = document.URL;

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

例如

  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 进行更改。您可以修改所做的更改。

【讨论】：

谢谢文森特！我不太确定如何实现您提到的代码。你能解释一下我怎么能这样做吗？谢谢！
@Travis 你有，或者你愿意在你的项目中使用 jQuery 吗？如果是这样，那么您可以很容易地做到这一点。让我知道，我会发布一些代码。
我愿意尽一切努力使背景颜色适用于与当前 URL 匹配的链接。谢谢文森特！
我在上面的答案中添加了 abit 这应该会有所帮助。
我在我的头代码中添加了以下内容，但它不起作用。我做错了吗？

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

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

【讨论】：

这不是错字 :) Shopify 会自动将“活动”类添加到主集合链接，但不会自动为与子集合对应的链接分配“活动”类。我尝试将 css 样式 :active 添加到链接中以查看它是否会更改背景颜色，但它不起作用。谢谢cal_b！

【解决方案5】：

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

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

http://jsfiddle.net/39DuU/

如果您将鼠标悬停在链接上，它会变为 Lime；如果您单击链接但不释放鼠标按钮，它会变为红色。

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

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

【讨论】：