隱藏和顯示div與jQuery

基本上我有一個設置菜單有3個選項和3個div，其中2個默認是隱藏的。整個事情在第一次點擊時工作正常，它隱藏正確的div並顯示正確的div，同時從當前鏈接中刪除活動類並將其添加到被單擊的活動類。但是，當我嘗試再次單擊另一個鏈接時，它會滑下正確的div，但它不會向上滑動另一個打開的div。我被卡住了。隱藏和顯示div與jQuery

代碼：

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'); 

}); 
}

預先感謝您！

來源

2012-10-24 user1701398

順便說一句 - 這是很好的形式掛鉤點擊到A標籤，而不是LI。 –

這條線，如果我沒有錯誤..看起來像你想存儲currentCliked在當前的權利。如果有兩個類那麼你的選擇是錯誤的...

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

應該

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

Check FIDDLE

而且它是一個更好的做法，指定事件處理程序，而不是調用函數，因爲如果你多次調用一個函數，事件處理程序可能會被複制。附上事件的錨，而不是李的

來源

2012-10-24 20:00:14

$（'。nav-pills li.active'）也可以。 –

謝謝你的作品！ – user1701398

很高興工作:) –

沒有逗號代替本

$('.active, .settingLink')

試試這個

$('.active.settingLink')

選擇

來源

2012-10-24 20:05:56 AnandVeeramani

隱藏和顯示div與jQuery

回答

相關問題