切換按鈕顯示/隱藏股利不斷跳躍向上

我有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

切換按鈕顯示/隱藏股利不斷跳躍向上

回答

相關問題