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

您可以使用类似

的数组

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

然后你可以遍历数组元素。另一种方法是使用你提到的变量（逗号分隔）并拆分它们。然后你可以再次循环它们。请参阅此主题的示例：Split string with JavaScript

Answer 2

实际上，我的代码中没有您需要tabIds的地方。如果你只是删除它，它的工作方式完全相同。

.click()事件的唯一实例将以任意方式添加到每个a元素，您无需通过ID指定它们。以下是移除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数组，但我认为您不需要它。

希望它有所帮助！

jQuery选项卡为同一个函数添加更多选择器

2 个答案: