1

「現在の」リンクを強調表示したままにできません。リンクは次のように単純に配置されています。

ホーム | について | ジョーダン

たとえば、ユーザーがリンクをクリックすると、その特定のリンクが強調表示されます。

私はこの機能を使ってみました：

$(document).ready(function() {
$("#menu li a").click(function (e) {
        e.preventDefault();
        $("#menu li a").addClass("current").not(this).removeClass("current");
}); 
});

HTML

  <div class="main">
        <div id="menu">
            <ul>
                <li><a onclick="window.location='index.action'" href="#" class="current">Home</a></li>
                <li><a onclick="window.location='about.action?c=azuki'" href="#">About</a></li>
                <li><a onclick="window.location='about.action?c=jordon'" href="#">Jordon</a></li>
                <li>                </ul>           </div>
                </div>

CSS

#menu li a.current {color:#3558b0}

4

4 に答える 4

2 
$('#menu').on( 'click', 'a', function() {
$('#menu a').removeClass( 'current' );
$(this).addClass( 'current' );
});
于 2012-09-06T19:10:13.420 に答える
0

要素レベルのイベントは、jQuery（または接続されている他のライブラリ）の前に発生します。あなたの問題は実行順序です。

初心者のためにこれを試してください：

<div id="menu">
  <a onclick="alert('First');">Helllo, World!</a>
</div>

$('a').on('click',function(e){
  alert('Second');
  e.preventDefault();
  return false;
});

onclickwindow.locationjQueryがpreventDefault()イベントを/キャンセルする前に起動して設定します。私のアドバイスは、href意図したとおりに使用し、HTML上でjQueryを調整することです。

経験則：マークアップにはマークアップを、スクリプトにはスクリプトを保持します。混ぜないでください。onclick（たとえば、属性の使用は避けてください）。

このルールに従うと、古いブラウザやJavaScriptが無効になっているブラウザとの下位互換性があり、新しいブラウザには拡張機能が提供されます。すべてのタグに埋め込まれた繰り返しタスクの代わりに、キャッシュされた機能を許可することで、帯域幅も節約できる可能性があります。

そうは言っても、これを試してみてください。

<div id="menu">
  <ul>
    <li><a href="index.action" class="current">Home</a></li>
    <li><a href="about.action?c=azuki">About</a></li>
    <li><a href="about.action?c=jordon">Jordon</a></li>
  </ul>
</div>

$(function() {
    $('#menu a').on('click',function (e) {
        var $this = $(this);
        $this.closest('ul').find('a').removeClass('current');
        $this.addClass('current');
        e.preventDefault();
    }); 
});

window.locationロード後、適用したクラスは次のページへのアクセスで無効になるため（AJAXを使用している場合を除く）、何を達成したいのかはまだわかりません。ただし、必要に応じて、参照$this.prop('href')してクリックイベントで使用することはできます。

于 2012-09-06T19:19:24.297 に答える
0

JQueryコードは有効ですが、マークアップが適切ではありません。私はあなたのために次の実用的なデモを置きました：

JsFIDDLE

于 2012-09-06T19:20:26.240 に答える
0

取り除くことができるonclick(つまり を使用する) ことができる場合は、 CSS ONLYhrefでこれを行うことができます。jQuery コードは必要ありません。ここを参照してください：

CSS:

#menu li a.current {color:#3558b0}

#menu li a:active,
#menu li a:focus{
 color:#fff;
background-color:red;   
}

HTML

<div class="main">
        <div id="menu">
            <ul>
                <li><a  href="#" class="current">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a  href="#">Jordon</a></li>
                <li>                </ul>           </div>
                </div>

ここに jfiddle があります: http://jsfiddle.net/fUL3w/10/

于 2012-09-06T19:34:12.607 に答える