具有href的结尾不以“＃”结尾的锚的CSS选择器

Question

我想在页面加载中显示一个加载图标。

我正在使用HTML，CSS和JS代码。

HTML：

<div class="loader-icon"></div>

JS：

$(window).load(function() {
    $(".loader-icon").fadeOut("slow");
});

$('a').click(function(){
    $(".loader-icon").fadeIn("slow");
})

以及一些CSS以显示的加载图标div.loader-icon。

如果我单击任何重定向到另一个页面的链接，则工作正常。但是，当链接没有重定向到另一个页面时，它将不起作用。就像当我单击“返回顶部”图标时一样，加载图标一直显示。它不会消失。

假设：

<a href="http://example.com/page/">Page Now</a>
<a href="http://example.com/page/#">Back to Top</a>
<a href="http://example.com/page2/">Page Other</a>

它适用于“其他页面”，但不适用于“返回首页”。

因此，我想为href不是以“＃”结尾的锚选择一个选择器。还是有使用其他简单技巧完成同一件事的更好方法？

Answer 1

您是否需要担心其他网址，包括＃？如果没有，您可以在此选择器上进行绑定：

a:not([href*='#'])

这只会定位网址中不包含＃的链接。你也可以用这个

a:not([href^='#'])

要定位任何以＃开头的链接，并且

a:not([href$='#'])

对于任何不以＃结尾的链接。希望这些帮助之一！