1

再会

我有 3 个切换按钮，显示/隐藏 3 个 div：

问题：每当我单击任何按钮时，页面都会向上滚动，但不会滚动到顶部...这很烦人，因为它会将用户的注意力从切换的内容上移开...

我不认为这是 href="#" 因为我确实为它们指定了书签......

请注意，最后两个 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

您在代码#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 回答
1

我想这是因为你隐藏它们的速度比你显示它们的速度要快，所以有一秒钟的总页面高度比它应该的要短。

于 2013-03-20T14:06:26.197 回答