0

これらのリンクのグループは、私のナビゲーション要素です。var make_button_activeリンクをクリックすると、アクティブなクラスを削除して挿入します。CSS では、class active によってリンクのテキストにオレンジ色が割り当てられます。このグループ外の別のリンクがあります。に行くリンクとしてのロゴ#home。これをクリックすると、アクティブなクラスが 内のリンクから削除されることを望みますul.menu。これにより、#home がクリックされたときにナビゲーション要素がオレンジ色のままになることはありません。一人でやってみたけどjavascript初心者です。

このクエストを手伝ってくれませんか？

HTML:

<nav>
    <div id="logo">
        <a href="#home" class="panel"><img src="_img/logo.png" alt="DR logo" /></a>
    </div>
    <div id="categories">
        <ul class="menu">
                <li><a href="#aboutMe">ABOUT ME</a></li>
                <li><a href="#showcase">SHOWCASE</a></li>
                    <li><a href="#howWork">HOW DO I WORK</a></li>
            <li><a href="#meet">LETS MEET</a></li>  
        </ul>
    </div>
    <hr>
</nav>

CSS:

.menu li.active a {
     color: #ff530d;
}​

Jクエリ:

<script type="text/javascript"> 
         var make_button_active = function()
           {
              //Get item siblings
              var siblings =($(this).siblings());
              //Remove active class on all buttons
              siblings.each(function (index)
                {
                  $(this).removeClass('active');
                }
              );

              //Add the clicked button class
              $(this).addClass('active');
            }

        var classOut = function()
            {
                $(".menu li").removeClass('active');
            }


             $(document).ready(function() {
            $(".menu li").click(make_button_active);

            $("#home").click(classOut);
        });
        </script>
4

3 に答える 3

3

JavaScript 全体を書き直しましたが、役に立ちますか?

JavaScript を次のように変更しました。

$(document).ready(function()
{

  $('.menu a').click(function(e)
  {
    e.preventDefault();
    $('.menu a').removeClass('active');
    $(this).addClass('active');        
  });

  $('#logo > a').click(function(e)
  {
    e.preventDefault();
    $('.menu a').removeClass('active');        
  });    

});

</p>

于 2012-10-03T21:39:25.360 に答える
3

初めに：jQuery !== JavaScript

また、#homehref ではなく id が選択されるため、ホーム リンクは選択されません。

代わりに使用$("#logo a").click(classOut);

また、関数make_button_activeは次のようになります。

var make_button_active = function() {
      $('.active').removeClass('active');
      $(this).addClass('active');
}

すべての兄弟を反復処理する必要はありません。active一度に 1 つの要素にしかできません。新しく選択した要素に設定する前に、これを選択してクラスを削除するだけです。

最後に、必ずしも関数式 を実行する必要はありません。この場合var make_button_active = function(){...}、関数宣言は完全に問題ありませんfunction make_button_active(){...}。ただし、多くの場合、関数を使用することは良いことであり、それらの関数を簡単に再利用できるため、Sam が無名関数を使用したのとは異なります。

スクリプト全体は次のようになります。

<script type="text/javascript">

    function make_button_active(){
        $('.active').removeClass('active');
        $(this).addClass('active');
    }
    function classOut(){
        $(".menu li").removeClass('active');
    }

    $(document).ready(function() {
        $(".menu li").click(make_button_active);
        $("#logo a").click(classOut);
    });
</script>
于 2012-10-03T21:42:24.340 に答える
1

マークアップに ID の要素がありませんhome:

<a href="#home" id='home' class="panel"><img src="_img/logo.png" alt="DR logo" /></a>

ID セレクターを使用していますが、セレクターは#homehref 属性を持つ要素を選択しません。要素に ID を追加するか、属性セレクターを使用できます。

$("a[href='#home']").click(classOut);

また、メソッドを使用する必要はありませんeach:

var make_button_active = function() {
    $(this).addClass('active').siblings().removeClass('active')
}
var classOut = function() {
    $(".menu li").removeClass('active');
}

$(document).ready(function() {
    $(".menu li").click(make_button_active);
    $("#home").click(classOut);
});

http://jsfiddle.net/hJdXU/

于 2012-10-03T21:38:48.727 に答える