1

テンプレートをヘッダー、フッター、コンテンツの 3 つの部分に分割しました。メインメニューのリンクはヘッダーファイルにあります...だから、CSSクラス「アクティブ」を選択されたハイパーリンクに適用したい...私はjqueryコードも書いています。 

<script type="text/javascript">

  $('#emp').click(function() {
    $(this).closest('li').addClass('active');
  });

</script>

このコードの問題は、リンクをクリックするたびに、CSS クラスがアタッチされてから削除されることです。

4

2 に答える 2

0

リンクをクリックするたびに、css クラスがアタッチされてから削除されます...

addClassクラスを削除しません。ページがリロードされているようです。イベントのデフォルト アクションを防止します。

$('#emp').click(function(eventObject) {
    eventObject.preventDefault();
    $(this).closest('li').addClass('active');
});

アップデート：

要素をクリックする<a>と、ページがリダイレクトされ、追加したクラスが削除されます。JavaScript を使用してクラスを追加する場合は、次のようにコーディングできます。

// relative
var path = document.location.pathname;
// absolute
var path = document.location.href;

$('#myMenu a').filter(function(){
    return this.href === path;
}).closest('li').addClass('active');

// Or:
$('#myMenu li').has('a[href='+path+']').addClass('active');
于 2013-03-02T09:28:17.897 に答える