1

マウスのホバーで変化する完全に機能するjquerytoolsアコーディオン/タブがあります。

マウスがタブ コンテナの外にあるときに、最後にアクティブ化されたタブの代わりにデフォルトのタブがアクティブ化されるようにします。

私のjavascriptは次のとおりです。

$(function() {
    $("#accordion").tabs("#accordion div", {
    tabs: 'img.tab',
    effect: 'fade',
    event: 'mouseover'
    });     
});

$('#accordion').mouseout(function(){
    // How should I activate a special tab?
});

編集

#accordionコンテナの HTML :

<div id="accordion">
    <!-- accordion header #1 -->
    <div>
        <img src="img/sample-tab-content.png" />
    </div>
    <img class="tab" src="./img/tab-title-activities.png" />

    <div>
        <h3>apprenticeship</h3>
        <p>Cras diam. Donec dolor lacus, vestibulum at, varius in, mollis id, dolor. Aliquam erat volutpat.</p>
    </div>
    <img class="tab" src="./img/tab-title-apprenticeship.png" />

    <div>
        <h3>association</h3>
        <p>Non lectus lacinia egestas. Nulla hendrerit, felis quis elementum viverra, purus felis egestas magna.</p>
    </div>
    <img class="tab" src="./img/tab-title-association.png" />
</div>

の付いた画像class="tab"はタブで、その上の HTML はタブのコンテンツです。

コンテナのmouseoutイベントの検出にも問題があることがわかりました。#accordion

次のコードでも機能しません。

$('#accordion').mouseout(function(){
    alert('done');
})

の子のいずれかにマウスが入ると、アラートが 2 回発生し#containerます。

編集2

mouseleaveイベントとしての代わりに使用する必要がありmouseoutましたが、これにより主な問題 (既定のタブの選択) に戻ります。

$('#accordion').mouseleave(function(){
    $('#accordion').tabs('select', 1);
})

このコードは、タブの変更を停止し、タブ バーを完全に破損します。

4

1 に答える 1

1

アップデート

$('#accordion').leave(function(){
    // How should I activate a special tab?
   var $accordion = $("#accordion").accordion();
   $accordion.accordion("option","active",1); //go to first tab on mouseleave

});

あなたが必要とするものです:)）

于 2013-08-31T21:02:09.033 に答える