jquery - Jquery选项卡闪烁并滚动到顶部

Question

我在标签的头部标签上有以下内容。当我单击选项卡时，我的页面会闪烁，它们会动画并转到页面顶部。

JS

$(document).ready(function(){
    $("a.tab").click(function () {
    $(".active").removeClass("active");
    $(this).addClass("active");
    $(".content").slideUp();
    var content_show = $(this).attr("title");
    $("#"+content_show).slideDown();
    });
});

HTML

<ul id="tabs">
    <li><a href="#" title="type1" class="tab active">type1</a></li>
    <li><a href="#" title="type2" class="tab">type2</a></li>
</ul>
<section id="type1" class="content">
    <p>contents1contents1contents1contents1contents1</p>
</section>
<section id="type2" class="content content_2">
    <p>content</p>
</section>

当我点击标签时，标签会闪烁并自动滚动到页面顶部？

Answer 1

Try this:

$("a.tab").click(function (e) {// <--------------pass the event
    e.preventDefault(); //<----------------------add this
    $(".active").removeClass("active");
    $(this).addClass("active");
    $(".content").slideUp();
    var content_show = $(this).attr("title");
    $("#"+content_show).slideDown();
});

Answer 2

尝试这个

$(document).ready(function(){
    $("a.tab").click(function () {
    var activeTab = $(".active");
    activeTab.removeClass("active")
    $(this).addClass("active");
    $("#"+activeTab.attr("title")).slideUp();
    var content_show = $(this).attr("title");
    $("#"+content_show).slideDown();
    });
});