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不以'＃'結尾

回答

相關問題