Предотвращение перехода страницы на вкладку нажмите JS

Question

У меня есть несколько вкладок с разной высотой. Как я могу препятствовать переходу страницы в верхнюю часть контейнера, когда я нажимаю ссылку на вкладку?

JSFiddle

http://jsfiddle.net/q1tdsar1/1/ Действия по воспроизведению проблемы: Нажмите на вкладке 3, прокрутите вниз, как будто читая содержимое вкладки 3 выберите вкладку 1. Boom> Страница Jump!

Вот мой JS:

$('#tabs div.tab').hide(); 
$('#tabs div.tab:first').show(); 
$('#tabs ul li:first').addClass('active'); 

$('#tabs ul li a').click(function(){ 
    $('#tabs ul li').removeClass('active'); 
    $(this).parent().addClass('active'); 
    var currentTab = $(this).attr('href'); 
    $('#tabs div.tab').hide(); 
    $(currentTab).show(); 
    return false; 
}); 

Вот HTML

<div id="tabs"> 
    <ul class="nav"> 
     <li><a href="#tab-1">Tab 1</a></li> 
     <li><a href="#tab-2">Tab 2</a></li> 
     <li><a href="#tab-3">Tab 3</a></li> 
    </ul> 
    <div id="tab-1" class="tab">Some content</div> 
    <div id="tab-2" class="tab">Some longer content</div> 
    <div id="tab-3" class="tab">Some even longer content</div> 
</div> 

Вот CSS:

#tabs ul.nav { 
    float: left; 
    width: 500px; 
} 
#tabs li { 
    margin-left: 8px; 
    list-style: none; 
} 
* html #tabs li { 
    display: inline; 
} 
#tabs li, 
#tabs li a { 
    float: left; 
} 
#tabs ul li.active { 
    border-top:2px #FFFF66 solid; 
    background: #FFFFCC; 
} 
#tabs ul li.active a { 
    color: #333333; 
} 
#tabs div.tab { 
    background: #FFFFCC; 
    clear: both; 
    padding: 15px; 
} 
#tabs ul li a { 
    text-decoration: none; 
    padding: 8px; 
    color: #000; 
    font-weight: bold; 
} 

Answer 1

Возможно, вам понадобится использовать равную высоту для всех вкладок, которые у вас есть. Таким образом, сценарий может быть полезен, поскольку это не скачок страницы, который случается, так как у вас уже есть return false вместо event.preventDefault();.

TabDivHeight = 0; 
$('#tabs div.tab').each(function() { 
    $(this).show(); 
    if ($(this).height() > TabDivHeight) 
    TabDivHeight = $(this).height(); 
    $(this).hide(); 
}); 
$('#tabs div.tab').height(TabDivHeight); 

Fiddle: http://jsfiddle.net/342fsu8o/

Или, если вы предпочитаете версию CSS, я бы сказал, пойти на это:

#tabs div.tab { 
    background: #FFFFCC; 
    clear: both; 
    padding: 15px; 
    max-height: 200px; 
    overflow: auto; 
} 

Fiddle: http://jsfiddle.net/jv3bmtof/

Или если вы предпочитаете плавный переход, вы можете использовать slideUp() и slideDown():

$('#tabs ul li a').click(function() { 
    $('#tabs ul li').removeClass('active'); 
    $(this).parent().addClass('active'); 
    var currentTab = $(this).attr('href'); 
    $('#tabs div.tab').slideUp(); 
    $(currentTab).slideDown(); 
    return false; 
}); 

Fiddle: http://jsfiddle.net/tdxyLvLs/