javascript - 単一ページのサイト リンクの色の切り替え Javascript

Question

私が構築している単一ページのマイクロ サイトがあり、すべてのコンテンツが 1 つのページにあります。アンカー タグを使用して、サイトの特定のセクションにジャンプしています。私が達成しようとしているのは、リンクの色を :hover と同じにし、別のリンクがクリックされるまでそのままにして、以前にクリックしたリンクを通常の状態に戻すクロスブラウザーソリューションです。

助けてください！ありがとう

Answer 1

これがJSFiddleの解決策です

HTML

<a href="#" class="selected">Test 1<a>
<a href="#" class="">Test 2<a>​

CSS

a.selected {
    color: pink;
}​

JavaScript (jQuery を使用)

$("a").on("click", function () {
    if ($(this).hasClass("selected")) { return; }

    $("a").removeClass("selected");        
    $(this).addClass("selected");
});​

この例では、ページ上のすべてのアンカー タグを使用しています。クラスを使用してより具体的に選択する方がよいでしょう。

上記のコードを実行する前に、次の html 行を追加します。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>