CSS选择器，用于锚定href不以'＃'结尾

我正在使用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>

它将为“页其它的工作，但不是“返回顶部”。

所以我想选择一个选择器，它的hrefs不以'＃'结尾。还是有更好的方法来使用不同的简单技巧来做同样的事情？

来源

2016-07-06 Rinku

如果你点击转到另一个页面...那么为什么你需要的功能点击a？ ....它只会刷新你的代码并显示你的加载器图标，你只需要加载函数 – DaniP

创建演示再现此 – charlietfl

@DaniP，所以我需要删除第二个js代码？ – Rinku

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

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

这只会将不包含＃的链接定位到URL中。您也可以使用这个

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

要目标，不以＃开头的任何链接，

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

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

来源

2016-07-06 20:35:08 will

作为一个纯CSS的解决方案，这将是我的选择。感谢分享。 –

其实这是一个WordPress主题。我想我应该删除第二个js代码。因为它会产生问题与商业添加到购物车AJAX按钮。添加到购物车链接没有＃在最后。 – Rinku

你必须走得更深！ a：not（[href $ ='＃']）：not（[href * ='cartpagename']）你可以添加尽可能多的字符串：不需要选择器 – will

您可以使用ends with selector与not()

$('a').not('[href$="#"]').on("click", function(e) { 
 
    $(this).toggleClass("active"); 
 
    e.preventDefault(); 
 
});

.active{ background-color: lime; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<a href="#">Has # at end</a> 
 
<a href="http://www.google.com">FOO</a> 
 
<a href="http://www.google.com">BAR</a>

可以使用:not() selector，但引用的jQuery的建议：

的。不是（）方法最终会提供与将复杂选择器或变量推入到：not（）选择器过滤器相比，使用更易读的选择呃。在大多数情况下，这是一个更好的选择。

来源

2016-07-06 20:35:24 epascarello

-2

它不起作用，因为您在窗口加载时添加事件，这意味着如果您希望图标淡出，则需要刷新页面。

当您点击返回页首链接时也添加该事件。

<a href="http://example.com/page/#" onclick="myFunct();">Back to Top</a> 

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

来源

2016-07-06 20:37:50 andrralv

这不完全是OP问题的答案。 –

另外你为什么要使用'onclick'？这不是20世纪90年代 – charlietfl

CSS选择器，用于锚定href不以'＃'结尾

回答

相关问题