jquery - ：targetまたはjqueryを介してアクティブなアンカーhrefを強調表示する

Question

「この記事の」機能の目次のリンクの1つをクリックすると、コンテンツが自動的に表示され、小さなjqueryを使用して、現在のアンカーポイントに隣接するtocウィジェットを移動します。

理想的には、tocウィジェットで現在アクティブなセクションを強調表示するために：target属性を使用します。しかし、私はすでにそれをアンカー自体に使用しています。

jQueryはこれを行うことができますか？

score 1 · Accepted Answer

誰かがリンクをクリックするだけで簡単にクラスを追加できます

$('.cb-toc li').click(function() {
    $(this).addClass('active').siblings('li').removeClass('active');
});

上記で動作する .jsfiddleを次に示します。

score 0 · Accepted Answer

ドキュメントの目次をアンカーの下の位置に物理的に移動しているように見えるので、純粋な CSS でそれを行うことができます。

#bookmark2:target + .cb-toc a[href="#bookmark2"] {
  color: #444;
}

もちろん、これに関する問題は、アンカー/リンクのペアごとにセレクターを追加する必要があることです。すでにjQueryを使用してTOCの位置を操作しているため、jQueryベースのソリューションに固執する方が適切でクリーンです。ジョン・ハーディングが提案した。

2 に答える 2