1

良い一日

3つのdivを表示/非表示にする3つのトグルボタンがあります:

問題: いずれかのボタンをクリックすると、ページが上にスクロールしますが、一番上まではスクロールしません...切り替えられたコンテンツからユーザーの注意をそらしてしまうため、非常に煩わしいです...

ブックマークを指定したので、 href="#" ではないと思います...

最後の 2 つの div には同じ量のコンテンツがありますが、最初の div には少し少ないことに注意してください...

ボタンをクリックするたびにビューポートが上に移動するのはなぜですか? それを修正する最良の方法は何ですか？

         <div id="featuredToggle">
              <ul>
                  <li><a class="latestClick clickedStyle" href="#latestInner">Latest</a></li>
                  <li><a class="make" href="#make">Make</a></li>
                  <li><a class="models" href="#models">Models</a></li>
              </ul>
          </div>

         <div id="latestInner"> 
           content here
         </div>
         <div id="make">
           content
         </div>
         <div id="models">
           content
         </div>

JS:

 $(document).ready(function() {

            $('#make').hide(50);
            $('#models').hide(50);

            $('#featuredToggle ul li a').click(function (e) {
                e.preventDefault();

                if ($(this).hasClass('latestClick')) {

                    $('#featuredToggle ul li a.make').removeClass('clickedStyle');
                    $('#featuredToggle ul li a.models').removeClass('clickedStyle');
                    $(this).addClass('clickedStyle');

                    $('#make').hide(200);
                    $('#models').hide(200);
                    $('#latestInner').show(500);

                } else if ($(this).hasClass('make')) {

                    $('#featuredToggle ul li a.latestClick').removeClass('clickedStyle');
                    $('#featuredToggle ul li a.models').removeClass('clickedStyle');
                    $(this).addClass('clickedStyle');

                    $('#latestInner').hide(200);
                    $('#models').hide(200);
                    $('#make').show(500);

                } else if ($(this).hasClass('models')) {

                    $('#featuredToggle ul li a.latestClick').removeClass('clickedStyle');
                    $('#featuredToggle ul li a.make').removeClass('clickedStyle');
                    $(this).addClass('clickedStyle');

                    $('#latestInner').hide(200);
                    $('#make').hide(200);
                    $('#models').show(500);
                }
            });

        });

ありがとうございました！

4

2 に答える 2

1

表示するよりも速く非表示にするため、ページ全体の高さがわずかに短くなるためだと思います。

于 2013-03-20T14:06:26.197 に答える
1

コードでas#modelを#models複数回入力すると、トグルで問題が発生する可能性があります。あなたdivの id はmodelです。リンクはどの要素も正しく参照しません。また、ほとんどのコードは完全に冗長です。常に同様のコードを再利用してください。要素ごとに同じことをやり直したくありません。次の単純化を検討してください。

$(function() {
    $('#make').hide(50);
    $('#model').hide(50);

    $('#featuredToggle ul li a').click(function (e) {
        e.preventDefault();

        $('#featuredToggle ul li a').not(this).removeClass('clickedStyle');
        $(this).addClass('clickedStyle');

        $('#featuredToggle ul li a').not(this).each(function() {
            $($(this).attr('href')).hide(200);
        });

        $($(this).attr('href')).show(500);
    });
});
于 2013-03-20T13:20:34.493 に答える