Jquery-Tab-Hashtag-Problem

Question

Derzeit habe ich eine sehr einfache Registerkarte System eingerichtet, das Problem ist, wenn die Sie auf die Registerkarten die Seite bewegt sich nach oben, aber nicht den ganzen Weg nach oben. Ich habe versucht, return false; und e.preventDefault(); in meinem Klick-Ereignis. Keines davon scheint zu funktionieren. Wenn jemand mir helfen könnte, die Seite zu stoppen, wenn eine Registerkarte angeklickt wird, wäre das großartig. Hier ist mein Code, auch für wissen, ich habe nur die e.preventDefault(); in meinem Klick-Ereignis, aber ich habe auch versucht, die return false zu :

    $(".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();

});

Hier ist mein aktuelles 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

Das Problem hat nichts mit einem Hashtag oder javascript:void(0) zu tun. Das Problem ist, dass Sie ein Div ausblenden und dann das andere einblenden. Für einen Moment dazwischen wird nichts angezeigt und so wird die Seitenlänge reduziert, so dass die Bildlaufleiste nach oben verschoben zu sein scheint, wenn die Höhe wieder erweitert wird.

Sie müssen die Höhe des Containers der Registerkarte auf die Höhe der Registerkarte kurz vor dem Ausblenden einstellen.

EDIT: Hier ist etwas, das Ihrer tatsächlichen Umsetzung näher kommt:

$(".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

Dies funktioniert mit Ihrem 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

Sie müssen die ID nicht unbedingt im Link haben, Sie können dies tun. Die click() Ereignis das Element tatsächlich passiert.

Hier ist ein Beispiel auf jsfiddle

Wenn Sie andere Probleme haben, können Sie gerne einen Kommentar abgeben und wir werden sie beheben.