切换按钮显示/隐藏股利不断跳跃向上

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

问题：每当我点击按钮的任何，页面滚动起来，但不是顶端...这是非常恼人的，因为它指导用户的焦点远离切换的内容...

我不认为这是href =“＃”，因为我确实指定了书签他们...

请注意，最后两个div有相同数量的内容，但第一个e有点少...

为什么每次点击按钮时视口都会向上移动？修复它的最佳方法是什么？

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

     });

谢谢！

来源

2013-03-20 DextrousDave

它可能是因为页面大小正在减少，因为这些元素的损失。尝试将body和html的CSS设置为：'min-hieght：100％; height：100％; max-height：100％;'。走着瞧吧。 – sourRaspberri 2013-03-20 13:16:52

我虽然如此，但我虽然也许有一个解决方案/技巧，我不知道...我会尝试看看会发生什么 – DextrousDave 2013-03-20 13:20:30

可以做'.css（{'opacity'：'0'}）'那个技术上仍然存在的元素的方式并不会改变身体的高度等仅作为测试。不是解决方案。 – sourRaspberri 2013-03-20 13:22:07

您错误地输入#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-20 13:20:34 nbrooks

我实际上在这里输错了它，它实际上是我的代码中的“模型”，否则它不会有效......问题是随着视口向上跳，我认为这是因为事实当任何div被隐藏时，该空间将从视口中移除...非常感谢您的代码审查...欣赏。 – DextrousDave 2013-03-20 13:26:40

只是测试你的代码...不工作..buttons没有响应... – DextrousDave 2013-03-20 13:28:25

@DextrousDave哦，你的链接正在成为代码触发前的绝对链接，你可以使用jQuery来获取实际的attr。（更新） - http://jsfiddle.net/25HFp/ – nbrooks 2013-03-20 13:41:57

我想这是因为你隐藏起来的速度比你告诉他们等了轻微的第二页全部测试高度比它应该更短。

来源

2013-03-20 14:06:26 xpy

切换按钮显示/隐藏股利不断跳跃向上

回答

相关问题