0

回転するjQueryタブがあります。これらのタブにカーソルを合わせると一時停止し、クリックすると回転を停止します。

ただし、一時停止は正常に機能しますが、ホバーイベントのバインドを解除できません（mouseenterとmouseleaveを別々にバインド解除することもできます）。

ここでは、2つの異なるアプローチで2つのjsfiddleを作成しましたが、どちらも同じ問題があります。

http://jsfiddle.net/bdrvC/15/

function tab_hover_in() {
        $(this).tabs('rotate', 0, false);
}
function tab_hover_out() {
        $(this).tabs('rotate', 3000, false);
}
function tab_click() {
        $(this).tabs('rotate', 0, false);
        $(this).unbind('mouseenter',tab_hover_in);
        $(this).unbind('mouseleave',tab_hover_out);
        event.preventDefault();  
}

$('.tabs-rotate').tabs({
        selected: 'tabs-1'
}).tabs('rotate', 3000, false);

$('.tabs-rotate').bind({
        'click': tab_click,
        'mouseenter': tab_hover_in,
        'mouseleave': tab_hover_out
});

http://jsfiddle.net/bdrvC/16/

$('.tabs-rotate').tabs({
  selected: 'tabs-1'
}).tabs('rotate', 3000, false);

$('.tabs-rotate').hover(function() {
    $(this).tabs('rotate', 0, false);
  }, function() {
    $(this).tabs('rotate', 3000, false);
});
$('.tabs-rotate').click(function() {

  $(this).tabs('rotate', 0, false);
  $(this).unbind('mouseleave');

});

クリックした後も回転が続く理由を誰かが説明できますか？

どうもありがとう！

4

1 に答える 1

1

クリックイベントが適切な要素にバインドされていません...使用できます

$('.ui-tabs-nav li a').click(function() {...});

代わりは

于 2012-11-06T14:38:07.597 に答える