Question

我已经阅读了一篇描述创建简单标签的教程：http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery/ 但我想修改它，并且无法达到预期的结果，并且可以在一个模板上看到该结果：http://themeforest.net/item/maven-portfolio-wordpress/49522?no_login=true （只需点击“实时预览”）

所以，我想要一个内容： 1. slideUp（）和fadeOut（）同时进行 2.同时slideDown（）和fadeIn（）

我发现了一篇关于某个主题的有趣文章：http://www.learningjquery.com/2008/02/simple-effects-plugins 但是，正如我所说，我不知道该怎么做。

我现在使用的代码：

(function($) {
    $.fn.slideFadeToggle = function(speed, easing, callback) {
        return this.animate({
             opacity: 'toggle',
             height: 'toggle',
        }, speed, easing, callback);
    }   
})(jQuery)



$(function() {
    $('.tab-content').hide();
    $('ul.tabs li:first').addClass('active');
    $('.tab-content:first').show();

    $('ul.tabs li a').click(function() {
        $("ul.tabs li").removeClass("active");
        $(this).parent().addClass('active');
        $('.tab-content').hide();
        var href = $(this).attr('href');
        $(href).slideFadeToggle('slow');
        return false;       
    });
});

非常感谢，如果你可以帮助我））

Answer 1

试试这个：

(function($) {
    $.fn.slideFadeToggle = function(speed, easing, callback) {
        return this.animate({
             opacity: 'toggle',
             height: 'toggle',
        }, speed, easing, callback);
    }   
})(jQuery)
$(document).ready(function() {
    $('.tab-content').hide();
    $('ul.tabs li:first').addClass('active');
    $('.tab-content:first').addClass('active').show();

    $('ul.tabs li').click(function() {
        $("ul.tabs li").removeClass("active");
        $(this).addClass('active');
        var activeTab = $(this).find("a").attr("href");
        $('.tab-content.active').removeClass('active').slideFadeToggle('slow',function(){
            $(activeTab).addClass('active').slideFadeToggle('slow',function(){});
        });
        return false;
    });
});

您的代码仍在调用

$('.tab-content').hide();

在您制作任何动画之前隐藏所有内容。您还需要使用回调功能。这意味着您在活动选项卡内容上调用动画，完成后，您可以在新的活动内容上调用它。

对于所有使用原始示例的人，您正在检查http://jsbin.com/egohi

如何修改标签界面？

1 个答案: