こんにちは、html と javascript のみを使用する必要があります。トップ ナビゲーション リンクを含む 1 つのページを作成しました。これらのリンクの URL は次のようなものです。
domain.com、domain.com/b1、domain.com/b2
現在のリンクを強調表示するにはどうすればよいですか。
こんにちは、html と javascript のみを使用する必要があります。トップ ナビゲーション リンクを含む 1 つのページを作成しました。これらのリンクの URL は次のようなものです。
domain.com、domain.com/b1、domain.com/b2
現在のリンクを強調表示するにはどうすればよいですか。
簡単な JS スクリプトを使用してリンクをチェックし、 (現在の URL)href
と比較する必要があります。window.location.href
JQuery を使用した簡単な例を次に示します。
var currentUrl = window.location.href;
$('a').each(function(index) {
var url = $(this).attr("href");
if (url === currentUrl) {
$(this).addClass("current");
} else {
$(this).removeClass("current");
}
});
current
ここでは、現在のリンクの場合、リンクにクラスを追加します。ここに JSFiddleのデモがあります。
jqueryの使用
$('a[href="' + window.location.pathname + '"]').addClass('highlight');
パス名が適切でない場合は、場所オブジェクトの 1 つのプロパティ (またはプロパティの組み合わせ) で置き換えます。
スニペットは、指定された href を持つリンクに 'highlight' クラスを追加します。次に、リンクを強調表示する css を記述できます。
質問が理解できたら、リンクタグに html-attribute スタイルを試してみてください:
<a style="color: red">link</a>
または、そのリンクの CSS ファイルを編集します。
サーバーサイドでクラスを設定し、このクラスをCSSに定義できます。
JS のみをコーディングする場合は、JS オブジェクト window.location を参照してください。