Question

美好的一天

我有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);
                }
            });

        });

谢谢！

Answer 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);
    });
});

Answer 2

我认为这是因为你隐藏它们的速度比你显示它们的速度要快，所以稍微高一点的页面高度应该比它应该的要短。

切换按钮显示/隐藏Div继续向上跳跃

2 个答案: