jQuery选项卡的自定义脚本

Custom script of jQuery Tabs

本文关键字：自定义 脚本 选项 jQuery      更新时间：2024-03-16

我在jquery选项卡上遇到了棘手的问题。以下链接到我的网站：

http://www.rask.pl/test/majatruck/wynajem-krotkoterminowy.html

divs的结构：

<div class="cnt">
    <div class="left">
        <ul class="list">
        <li><span class="title"><a class="tab_link tab_link_wybrany" rel="#rnt1" href="#">First</a></span></li>
        <li><span class="title"><a class="tab_link" rel="#rnt2" href="#">Second</a></span></li>
        <li><span class="title"><a class="tab_link" rel="#rnt3" href="#">Third</a></span></li>
        </ul>
    </div>
    <div class="super">
        <div id="rnt1" class="tab_text tab_wybrany">First</div>
        <div id="rnt2" class="tab_text">Second</div>
        <div id="rnt3" class="tab_text">Third</div>
    </div>
</div>

选项卡脚本：

$(document).ready(function(){
    $(".tab_wybrany").fadeIn();
    $(".tab_link").live("click", function(event){
        event.preventDefault();
        $(".tab_link_wybrany").removeClass("tab_link_wybrany");
        $(this).addClass("tab_link_wybrany");
        var container_id = $(this).attr("rel");
        $(".tab_wybrany").animate({
            opacity : "toggle",
        },function(){
            $(this).removeClass("tab_wybrany");
            $(container_id).addClass("tab_wybrany");
            $(".tab_wybrany").animate({
                opacity : "toggle",
            });
        });
    });
});

当我点击tab-divs dispear？离线一切都好吗…我不知道我的错误在哪里。。。请帮帮我！：）

我建议您使用fadeIn和fadeOut，而不是使用动画不透明度。这可能会解决你的问题。

所以你的脚本应该是这样的：

$(document).ready(function(){
    $(".tab_wybrany").fadeIn();
    $(".tab_link").live("click", function(event){
        event.preventDefault();
        $(".tab_link_wybrany").removeClass("tab_link_wybrany");
        $(this).addClass("tab_link_wybrany");
        var container_id = $(this).attr("rel");
        $(".tab_wybrany").fadeOut(750, function(){
            $(this).removeClass("tab_wybrany");
            $(container_id).addClass("tab_wybrany");
            $(".tab_wybrany").fadeIn(750);
        });
    });
});
相关文章：