Jquery tab hash标签问题

Question

目前我设置了一个非常简单的选项卡系统，问题是当您单击选项卡时，页面向上移动，但没有一直移动到顶部。我尝试过返回 false；和 e.preventDefault();在我的点击事件中。这些似乎都不起作用。如果有人可以帮助我在单击选项卡时停止页面移动，那就太好了。这是我的代码，也知道我只有 e.preventDefault();在我的点击事件中，但我也尝试过 return false :

    $(".tab_content").hide();
$(".bat-tabs li:first").addClass("active").show();
$(".tab_content:first").show();
$("#nav-container").css("border-top", "3px solid #F79C0C");

$(".bat-tabs li > a").click(function (e) {
    $(".bat-tabs li").removeClass("active");
    $(this).parent().addClass("active");
    $(".tab_content").hide();

    var activeTab = $(this).attr("href");
    $(activeTab).fadeIn();
    e.preventDefault();

});

这是我的实际 html

Thank you guys for both responding so quickly. For jbrookover: not sure how i should implement your solution bc right now for each one of my links i have a corresponding #+('tab name'), like this:                             {      <div class="clearfix">
    <ul class="bat-tabs clearfix">
        <li><a href="#baseball"  title="click to see all our choices for baseball bats" class="active"><h2>Baseball Bats</h2></a></li>
        <li><a href="#fast" title="click to see all our choices for fastpitch bats"><h2>Fastpitch Bats</h2></a></li>
        <li><a href="#slow"  title="click to see all our choices for slowpitch bats"><h2>Slow Pitch Bats</h2></a></li>
    </ul>
</div>
<div id="nav-container" class="section clearfix nav">
    <div id="baseball" class="tab_content">
        content here
     </div>
     <div id="fast" class="tab_content">
        content here
     </div>
     <div id="slow" class="tab_content">
        content here
     </div>
</div>                                                                         }

Answer 1

该问题与井号标签或 javascript:void(0) 无关。问题是您隐藏一个 div，然后显示另一个。中间有一段时间没有显示任何内容，因此页面长度减少了，当高度再次扩展时，使滚动条看起来向上移动。

您需要做的是将选项卡容器的高度设置为选项卡隐藏之前的高度。

编辑:以下是更接近您的实际实现的内容:

$(".bat-tabs li > a").click(function (e) {
    //set the height of the container
    $('#nav-container').css({'height': $("#nav-container").height(), 'overflow': 'hidden'});

    //your own logic for hiding/showing a new tab
    $(".bat-tabs li").removeClass("active");
    $(this).parent().addClass("active");
    $(".tab_content").hide();
    var activeTab = $(this).attr("href");
    $(activeTab).fadeIn();

    //set the height of the container back to auto.
    $('#nav-container').css({'height': 'auto', 'overflow': 'visible'});

    e.preventDefault();   
});