0

HTMLメニュー構造があります。以下を使用します。

<div id="footer-menu">
  <ul>
    <li><a id="menu-1" href="site.com/1"></a></li>
    <li><a id="menu-2" href="site.com/2"></a></li>
    <li><a id="menu-3" href="site.com/3"></a></li>
    <li><a id="menu-4" href="site.com/4"></a></li>
    <li><a id="menu-5" href="site.com/5"></a></li>
  </ul>
</div>

そして、アクティブなメニューにアクティブなクラスを追加したいと思います。私のJS：

$(function() {
    $('#footer-menu li a').click(function(e) {
        // you usually want to prevent default for handling link clicks,
        // otherwise the browser follows the href (if that's intended skip this)
        e.preventDefault();

        $('#footer-menu li a').not(this).removeClass('active');
        $(this).addClass('active');
    });
});

この関数はアクティブなクラスを追加します。

<li><a id="menu" href="site.com" class="active"><a>

classただし、別のリンクをクリックするときは、タグを削除しないでください。

<li><a id="menu" href="site.com" class><a>

どうすれば修正できますか？

4

3 に答える 3

4

「class」属性を削除する必要はありません。存在するため、ブラウザー デバッガーはそれを表示しますが、クラス値が「アクティブ」でない限り、何の問題もありません。

于 2012-12-25T13:35:27.607 に答える
1

まず、ID が重複しているため、HTML マークアップを有効にします。
あなたはこれを試すことができます

$('#footer-menu a').click(function(){
     $('#footer-menu a').removeClass("active");
     $(this).addClass("active");
});
于 2012-12-25T13:33:58.290 に答える
0 
<div id="footer-menu">
<ul>
<li><a id="menu" href="#"></a></li>
<li><a id="menu" href="#"></a></li>
<li><a id="menu" href="#"></a></li>
<li><a id="menu" href="#"></a></li>
<li><a id="menu" href="#"></a></li>
</ul>
</div>

Jquery コード:

$(function() {
    $('#footer-menu li a').click(function(e) {
        e.preventDefault();
        $('#footer-menu li a').each( function() {
        $(this).removeClass('active');
        });
        $(this).addClass('active');
    });
});​

http://jsfiddle.net/aApYZ/1/

于 2012-12-25T14:04:36.620 に答える