javascript - href 不以 '#' 结尾的 anchor 的 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>

它适用于“Page Other”但不适用于“Back to Top”。

所以我想为 href 不以“#”结尾的 anchor 选择一个选择器。或者是否有更好的方法使用不同的简单技巧来完成同样的事情？

Answer 1

您是否需要担心包括 # 在内的其他 URL？如果没有，您可以在此选择器上进行绑定(bind):

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

这将只针对 URL 中不包含 # 的链接。你也可以用这个

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

定位任何不以#开头的链接，以及

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

对于任何不以#结尾的链接。希望其中之一对您有所帮助!