0

基本的に、3つのオプションと3つのdivを備えた設定メニューがあり、そのうち2つはデフォルトで非表示になっています。最初のクリックですべてが正常に機能し、現在のリンクからアクティブなクラスを削除してクリックされたものに追加しながら、正しいdivを非表示にして正しいdivを表示します。ただし、別のリンクをもう一度クリックしようとすると、正しいdivが下にスライドしますが、開いている他のdivは上にスライドしません。ハマった。

コード：

html：

<ul class="nav nav-pills">
        <li class="settingLink active" data-tab="general"><a href="#">General</a></li>
        <li class="settingLink" data-tab="social" ><a href="#">Social</a></li>
        <li class="settingLink" data-tab="captcha"><a href="#">Captcha</a></li>
    </ul>

div：

<div id="generalSettings">
</div>
<div id="socialSettings">
</div>
<div id="captchaSettings">
</div>

JS：

function settingMenu(event)
{
$('.settingLink').bind('click', function(){
    //The tab value of the currently clicked element
    var tab = $(this).data('tab');
    //Current active element
    var current = $('.active, .settingLink').data('tab');

    //Slide the old div up
    $('#'+current+'Settings').slideUp('fast', function(){
        //Slide the new div down
        $('#'+tab+'Settings').slideDown();
    });

    //Remove active class from current link
    $('.active, .settingLink').removeClass('active');
    //Add active class to new link
    $(this).addClass('active');

});
}

前もって感謝します！

4

2 に答える 2

2

これの代わりにコンマはありません

$('.active, .settingLink')

これを試して

$('.active.settingLink')

セレクタ

于 2012-10-24T20:05:56.760 に答える
1

私が間違っていなければ、この行は..現在の右にcurrentClikedを保存​​したいようです。両方のクラスがある場合、セレクターは間違っています...

var current = $('.active, .settingLink').data('tab');

する必要があります

var current = $('.active.settingLink').data('tab');

フィドルをチェック

また、関数を呼び出す代わりにイベント ハンドラーを割り当てることをお勧めします。これは、関数を複数回呼び出すと、イベント ハンドラーが重複する可能性があるためです。イベントをliの代わりにアンカーに添付します

于 2012-10-24T20:00:14.030 に答える