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"); 
}) 

とdiv.loader-iconためのローディングアイコンを表示するためにいくつかのCSS。

別のページにリダイレクトするリンクをクリックしても問題ありません。しかし、リンクが別のページにリダイレクトされていないときは機能しません。 「トップに戻る」アイコンをクリックすると、読み込み中のアイコンが表示され続けます。フェードアウトしません。

と仮定します。

<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が '＃'で終わらないアンカーのセレクタを選択したいと思います。あるいは、別の簡単なトリックを使って同じことをするより良い方法がありますか？

Answer 1

＃を含む他のURLについて心配する必要はありますか？そうでない場合は、このセレクタにバインドすることができます。

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

URLに＃が含まれていないリンクのみをターゲットにします。また、＃で終わっていない任意のリンクについて＃で始まり、そして

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

しない任意のリンクをターゲットとするには、この

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

を使用することができます。うまくいけば、これらのうちの1つが役立ちます！

Answer 2

あなたは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>

でends with selectorを使用することができますが:not() selectorを使用することができますが、jQueryの勧告を引用する：

.NOT（）メソッドを提供することになります複雑なセレクタや変数をa：not（）セレクタfiltにプッシュするよりも読みやすい選択が可能です。エル。ほとんどの場合、より良い選択です。

Answer 3

ウィンドウがロードされたときにイベントを追加するため、アイコンがフェードアウトするようにページを更新する必要があるため、機能しません。

トップに戻るリンクをクリックしたときにもイベントを追加します。

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

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