1

コードの抜粋: http://jsfiddle.net/chrisloughnane/9AjfU/

完全なコード.tabsは、他のすべての要素を AJAX で満たされた jQuery UI モーダル内に配置し、完全に機能します。

ここでは、ホバリングしているタブに関連付けられていないdivの各 jQuery slideUp()と、関連付けられているdivのslideDown()があります。

すべての個別の jQuery を 1 つに結合する最善の方法を知りたいです。

all()jQuery UIモーダルダイアログにこれがあるため、関数が存在します。

$('#your-dialog-id').dialog({
    open: function(event, ui) {
    $('.scroll-box').css({'max-height': bottomPosition-150, 'overflow-y': 'scroll'});
    all();}, //etc.

各 jQuery.on("mouseover",には、動的に追加される div として存在します。完全な書き直しを計画しているので、まだ削除していません。

4

3 に答える 3

2

liこれを試してください。タグにヘルパーID属性を追加できます。

<ul>
    <li class='all'>all</li>
    <li id="music"    class='musicselect'>music</li>
    <li id="sport"    class='sportselect'>sport</li>
    <li id="arts"     class='artsselect'>arts</li>
    <li id="general"  class='generalselect'>general</li>
</ul>

js：

$('ul li').on("mouseover", function(){
    $('div:not(.tabs)').slideUp();
    $('.' + this.id).stop(true, true).slideDown();
    $('.tabs li').css('color', '#fff'); // or $('.tabs li').addClass('white'); 
    $(this).css('color', '#66CBFF');
})

デモ

于 2012-07-13T19:55:23.640 に答える
2

これを試してください - http://jsfiddle.net/9AjfU/2/

HTML

<ul>
    <li class='all'>all</li>
    <li class='musicselect'>music</li>
    <li class='sportselect'>sport</li>
    <li class='artsselect'>arts</li>
    <li class='generalselect'>general</li>
</ul>

jQuery

$('.tabs li').on("mouseover", function(){
    $('.general, .music, .sport, .arts').slideUp();
    $('.' + $(this).attr("class").replace("select", "") ).stop(true, true).slideDown();
    $('.tabs li').css('color', '#fff');
    $(this).css('color', '#66CBFF');
});
于 2012-07-13T19:51:13.860 に答える
2

これが私が思いついた完全な JavaScript コードです。この方法では、HTML をまったく変更する必要はありません。

$('.all').css('color', '#66CBFF');

$('div.tabs').on('mouseover', 'li', function (e) {
    var $this = $(this),
        $notTabs = $('div').not('.tabs'),
        className = e.target.className,
        tabClass = className.replace(/select/, '');

    $notTabs.not(tabClass).slideUp();
    if ($this.hasClass('all')){
        $notTabs.slideDown();
    } else {
        $('.' + tabClass).stop(true, true).slideDown();
    }
    $('div.tabs li').css('color', '#fff');
    $this.css('color', '#66CBFF');
});

ここでサンプルを見ることができますhttp://jsfiddle.net/g2xg7/1/

ここで留意すべきことは、liタブ要素にクラスを追加する必要がある場合、これは機能しないということです。

于 2012-07-13T20:31:09.050 に答える