jQuery UI选项卡：通过绑定事件*使用数据属性更改div*

这应该很容易，但我有一些地方弄不清楚-jsfiddle:

我试图做的是绑定选项卡更改，以使用数据属性更改图像。（我需要使用bind，因为我需要将它添加到另一个也使用bind的函数中。）

但我现在想不起如何让它发挥作用

$('#tabs').bind('tabsshow', function(event, ui) {

var $tabs= $("#tabs").tabs();

var img = $(ui.panel).data("image");
$("#headerwrapper")
.animate({ opacity: 'toggle' }, function() {
$(this).css("background-image", "url(" + img + ")")
.animate({ opacity: 'toggle' });
});
}
}); 

这里

变化：

• 将选项卡初始值设定项从 事件
• 几个坏的}，）

更新：

• 改进了动画，使其不会断电
• 将脚本放置在加载事件中，以确保初始化

---

---

如果您不想使用tabs（），请只使用以下链接：

谢谢，这适用于

$（“#tabs”）.tabs（）$（'#tabs'）.bind（'tabsshow'，function（event，ui）{

高于

var$tabs=$（“#tabs”）.tabs（）；

，因为jQuery有一个bug。要绑定到tabshow事件，需要初始化tabs。我不认为这是bug。我想我没有理解你动画的要点（对于图像）。

var $tabs= $("#tabs").tabs();


$('#tabs').bind('tabsshow', function(event, ui) {
    var img = $(ui.panel).data("image");
    $("#headerwrapper").animate({ opacity: 'toggle' }, function() {
        $(this).css("background-image", "url(" + img + ")").animate({ opacity: 'toggle' });
});
});