jQuery選項卡，跳轉到頁面頂部，如何停止？

Question

我已閱讀其他文章，但我仍然無法獲得可能頁面跳到頂部點擊一個選項卡時。繼承人的HTML

<ul class="tabs-nav"> 
    <li class="active"><a href="#tab1"><i class="icon-list-ul"></i> Tab 1</a></li> 
    <li><a href="#tab2"><i class="icon-map-marker"></i> Tab 2</a></li> 
</ul> 

<!-- Tabs Content --> 
<div class="tabs-container"> 
    <div class="tab-content" id="tab1">Stuff</div> 
    <div class="tab-content" id="tab2">Stuff</div> 
</div> 

這裏是JS ...

(function() { 

    var $tabsNav = $('.tabs-nav'), 
     $tabsNavLis = $tabsNav.children('li'), 
     $tabContent = $('.tab-content'); 

    $tabsNav.each(function() { 
     var $this = $(this); 

     $this.next().children('.tab-content').stop(true,true).hide() 
              .first().show(); 

     $this.children('li').first().addClass('active').stop(true,true).show(); 
    }); 

    $tabsNavLis.on('click', function(e) { 
     var $this = $(this); 

     $this.siblings().removeClass('active').end() 
      .addClass('active'); 

     $this.parent().next().children('.tab-content').stop(true,true).hide() 
                 .siblings($this.find('a').attr('href')).fadeIn(); 

     e.preventDefault(); 

    }); 

})(); 

現在，我已經嘗試添加

onclick="return false;" 

在HTML標籤的href，但畢竟是在做沒有。非常感謝任何幫助！謝謝！

Answer 1

它的跳躍，因爲這<a href="#tab1">

嘗試<a href="javascript:void(0);"和使用其他屬性來確定哪些DIV應打開頂部，你可以添加anyattribute開始data-如data-id="#tab1然後讀取屬性，

或者你可以重新考慮你的HTML是如何設置，

如果你真的必須保持的東西，他們是那麼的方式，你可以嘗試

var $tabsNav = $('.tabs-nav'), 
     $tabsNavLis = $tabsNav.children('a'), //this line changed 
     $tabContent = $('.tab-content'); 

則：

$tabsNavLis.on('click', function(e) { 
     e.preventDefault(); //now this is <a> click , not <li> click 
     var $this = $(this).parent(); 
     $this.siblings().removeClass('active').end() 
      .addClass('active'); 
     $this.parent().next().children('.tab-content').stop(true,true).hide() 
                 .siblings($this.find('a').attr('href')).fadeIn(); 


    });