あらすじ複数の.htmlページを使用してクリックされた各ナビゲーションリンクに.currentクラスを動的に追加/削除する方法はありますか？
私は動的にクリックされた各メニューリンクに.currentクラスを追加するサンプル・ヘッダーナビゲーションを作成しようとしています。私は複数の.htmlページでJavaScriptおよび/またはjQueryでこれを達成しようとしています。
既知のバグが今
に見て.currentクラスは、リンクがクリックされたときに、単に簡潔に点滅しますが、すぐに削除されます。
ナビゲーションリンクがクリックされたログメッセージはコンソールに残っていません。現在、短時間点滅してすぐに削除されます。
は、それが動的などのMVCのようなものやフレームワークを使用して複数の.htmlページを使用してクリックされたか、私はオフに 良いだろう、各リンク に.currentクラスを追加/削除することは可能です
質問angular.js？
閉じるボディータグの直前の ページの下部にjQueryリファレンススクリプトを置く方がよいでしょうか？
マイヘッダーナビゲーション見て、このようなサンプルプロジェクト：
<nav>
<ul id="headerNav">
<li>
<a id="home" class="headerLink" href="index.html">Home</a>
</li>
<li>
<a id="about" class="headerLink" href="about.html">About</a>
</li>
</ul>
</nav>
マイscript.jsファイルは次のようになります。
/*jslint browser: true*/
/*global document, window, $, jQuery, alert, console, require, logger*/
$(document).ready(function() {
'use strict';
console.log("dom is ready!");
initHeaderNavLinks();
});
function initHeaderNavLinks() {
console.log("initializing header nav links...");
// add current class to first link in header navigation
$('#headerNav li:first a').addClass("current");
}
$('.headerLink').click(function() {
var clickedId = $(this).attr('id');
var msg = "";
msg = "clickedId: " + clickedId;
console.log(msg);
$(this).addClass('current');
});
ここはPlunkerのサンプルプロジェクトです。興味があるものについては https://plnkr.co:443/pVPDBfjmhqaIwnMEtMgm
UPDATE
、私は私の現在のニーズに最も適した、私のコードを簡素化するソリューションを見つけました。スクリプトタグの各ページにcurrentPageID変数を直接埋め込むことにしました。
更新プロジェクト
追加した各ページの先頭
<script>
var currentPageID = "about";
</script>
にこのスクリプトタグマイヘッダーナビゲーションは、次のようになります。
<nav>
<ul>
<li>
<a id="home" href="index.html">Home</a>
</li>
<li>
<a id="about" href="about.html">About</a>
</li>
</ul>
</nav>
マイscript.jsファイルのルックスをこのような。あなたは、私がHTML5のデータ-何に.dataset.whateverで、値を保持する属性を使用します（この場合、ページに書き込むことができない場合はここで
/*jslint browser: true*/
/*global document, window, $, jQuery, alert, console, require, logger*/
$(document).ready(function() {
'use strict';
console.log("dom is ready!");
console.log("currentPageID: " + currentPageID);
$("#" + currentPageID).addClass('current');
});
別のページのユーザーをナビゲートしている 'a'タグをクリックしているときにページが更新されていて、' script'がリセットされています – Rayon
@Rayonが言ったことと戦うために、 'localStorage'を使ってナビゲーションボタンそれはクリックされ、ページが読み込まれたときに取得されます。これには信頼性の高い作業が必要ですが、それはうまくいくはずです。もう1つの方法は、現在のページのコンテナに 'html'ページを動的に読み込むことです。 – Adjit
これはAdjitと同じことだとは分かりませんが、セッション変数を使用して、どのリンクが 'current'クラスを持つかを保持できます。最初のページの読み込み時に設定し、読み込んだときに各ページを参照させます。 –