0

以下工作正常：

    classes_tab.click(function(evt){
        evt.preventDefault();
        h_c.filter(':visible').fadeOut(fast, function(){
            disactive.removeClass('active');
            classes_tab.addClass('active');
            classes.fadeIn(fast);
        });
    });

    contacts_tab.click(function(evt){
        evt.preventDefault(evt);
        h_cl.filter(':visible').fadeOut(fast, function(){
            disactive.removeClass('active');
            contacts_tab.addClass('active');
            contacts.fadeIn(fast);
        });
    });

    home_tab.click(function(evt){
        evt.preventDefault();
        c_cl.filter(':visible').fadeOut(fast, function(){
            disactive.removeClass('active');
            home_tab.addClass('active');
            home.fadeIn(fast);
        });
    });

有没有办法在这个点击事件之前编写一个函数，而不是每次点击事件中发生的事情都重复？

说我有类似的东西：

function tabs(x, y){
    x.fadeOut(fast);
            y.fadesIn(fast);
        }

比在每个点击事件中我只是通过更改参数来调用这个函数

4

3 回答 3

2

是的..你可以这样做..这是一个例子......

单击功能（本示例的 home_tab）..

...click(function(event){
     evt.preventDefault();
    functionName('c_cl','home_tab','home');
});

功能

function functionName(x,y,z)
{
        var x = $(#x)|| var y = $(#y)|| var z=$(#z) //add your selector here(this is just and examplr) 
        x.filter(':visible').fadeOut(fast, function(){
        disactive.removeClass('active');
        y.addClass('active');
        z.fadeIn(fast);
    });  
}

同样，您可以使用参数为另外两个调用 click 函数..

于 2012-11-07T10:27:16.933 回答
1

创建一个新函数

function myFunc(evt, active_tab, container){
        evt.preventDefault(evt);
        h_cl.filter(':visible').fadeOut(fast, function(){
            disactive.removeClass('active');
            active_tab.addClass('active');
            container.fadeIn(fast);
        });
}

将新函数绑定到元素的点击事件

home_tab.click(function(evt){
      myFunc(evt,home_tab, home);
    });
});

classes_tab.click(function(evt){
      myFunc(evt,classes_tab, classes);
    });
});

contacts_tab.click(function(evt){
      myFunc(evt,contacts_tab, contacts);
    });
});
于 2012-11-07T10:25:58.330 回答
1

您可以将数据传递给您的处理程序：

function tabsHandler(evt){
    evt.preventDefault();
    evt.data.x.fadeOut(fast);
    evt.data.y.fadesIn(fast);
}
$('.home_tab').on('click', {x : $foo, y : $bar}, tabsHandler);
// where $foo and $bar are references to jQuery objects

或者你可以这样做：

function tabsHandler(x, y){
    x.fadeOut(fast);
    y.fadesIn(fast);
}
$('.home_tab').on('click', function(evt){
    evt.preventDefault();
    tabsHandler($foo, $bar);
});

或者您可以先存储对其他对象的引用data，然后在处理程序中使用它们。尝试这样的事情：

// Your class names are my assumption
var $home_tab = $('.home_tab');
var $classes_tab = $('.classes_tab');
// I'm also assuming c_cl, h_c, disactive and home are existing jQuery objects
$home_tab.data({
    'cl' : c_cl,
    'disactive' : disactive,
    'objectToFadeIn': home
});

$classes_tab.data({
    'cl' : h_c,
    'disactive' : disactive,
    'objectToFadeIn': classes
});

function tabsHandler(evt){
    evt.preventDefault();
    var $tab = $(this);
    $tab.data('cl').filter(':visible').fadeOut(fast, function(){
        $tab.data('disactive').removeClass('active');
        $tab.addClass('active');
        $tab.data('objectToFadeIn').fadeIn(fast);
    });
}

$home_tab.click(tabsHandler);
$classes_tab.click(tabsHandler);

或者最后一点：

$(document).on('click', '.home_tab, .classes_tab', tabsHandler);
于 2012-11-07T10:34:33.757 回答