Question

目前我有一个非常简单的标签系统设置，问题是当你点击选项卡时页面向上移动但不是一直到顶部。我试过返回false;和e.preventDefault（）;在我的点击事件中。这些似乎都没有起作用。如果任何人都可以帮助我在单击选项卡时停止页面移动，这将是很棒的。这是我的代码，也知道我只有e.preventDefault（）;在我的点击事件中，我也尝试了返回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，然后显示另一个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();   
});

Answer 2

这适用于你的html：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
    $(".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();

    });
});

Answer 3

你真的不需要在链接中拥有id，你可以这样做。 click()事件实际上传递了元素。

这是example on jsfiddle

如果您有任何其他问题，请随时发表评论，我们会解决。

Jquery选项卡哈希标记问题

3 个答案: