jQuery選項卡添加更多選擇器到相同的功能

Question

我設法減少我的jquery選項卡到當前狀態，我在變量中定義選項卡ID。

問：如何修改此代碼以獲得更多ID？

例如：

var tabsId = '#tabs1', '#tabs2', ... ; 
var containerId = '#tabs-container1', '#tabs-container2', ... 

JS：

var containerId = '#tabs-container'; 
var tabsId = '#tabs'; 

$(document).ready(function() { 
    // Preload tab on page load 
    if ($(tabsId + ' li.current a').length > 0) { 
     loadTab($(tabsId + ' li.current a')); 
    } 

    $(tabsId + ' a').click(function() { 
     if ($(this).parent().hasClass('current')) { 
      return false; 
     } 

     $(tabsId + ' li.current').removeClass('current'); 
     $(this).parent().addClass('current'); 

     loadTab($(this)); 
     return false; 
    }); 
}); 

function loadTab(tabObj) { 
    if (!tabObj || !tabObj.length) { 
     return; 
    } 
    $(containerId).addClass('loading'); 
    $(containerId).fadeOut('fast'); 

    $(containerId).load(tabObj.attr('href'), function() { 
     $(containerId).removeClass('loading'); 
     $(containerId).fadeIn('fast'); 
    }); 
} 

HTML：

<ul class="mytabs" id="tabs"> 
    <li class="current"><a href="./tabs/tab1.php">Tab 1</a></li> 
    <li><a href="./tabs/tab2.php">Tab 2</a></li> 
    <li><a href="./tabs/tab3.php">Tab 3</a></li> 
</ul> 

<div class="mytabs-container" id="tabs-container"> 
    Loading. Please Wait... 
</div> 

Answer 1

其實，我不在你的代碼中你需要你的tabIds一個地方。如果你只是刪除它，它的工作原理完全相同。

無論哪種方式，.click()事件的唯一實例將被添加到每個a元素，並且您不必通過ID's來指定它們。以下是tabIds已刪除的示例。

http://jsfiddle.net/c7RHs/

var containerId = '#tabs-container'; 

$(document).ready(function() { 
    if ($('li.current a').length > 0) { 
     loadTab($('li.current a')); 
    } 

    $('li a').click(function() { 
     if ($(this).parent().hasClass('current')) { 
      return false; 
     } 

     $('li.current').removeClass('current'); 
     $(this).parent().addClass('current'); 

     loadTab($(this)); 
     return false; 
    }); 
}); 

function loadTab(tabObj) { 
    if (!tabObj || !tabObj.length) { 
     return; 
    } 
    $(containerId).addClass('loading'); 
    $(containerId).fadeOut('fast'); 

    $(containerId).load(tabObj.attr('href'), function() { 
     $(containerId).removeClass('loading'); 
     $(containerId).fadeIn('fast'); 
    }); 
} 

否則，你可以做ID的數組作爲另一個答案的建議，但我不認爲你需要它。

希望它有幫助！

Answer 2

你可以使用數組」 s like

var tabIds = {'tab1','tab2'}; 

然後你可以遍歷數組元素。另一種方法是使用像你提到的變量（逗號分隔）並將它們分開。然後你可以再次循環它們。 看到這個線程的例子：Split string with JavaScript