Question

在下面的代码中，我尝试初始化两个制表符控件（actions-power和actions-access），但只对第一个制表符控件进行初始化，而不是两者。我怎么解决它？

<div id="action-tabs">
        <ul class="tabs" id="actions-power">
            <li class="active"><a href="#action-power_cycle" data-toggle="tab">Power Cycle</a></li>
            <li><a href="#action-power_off" data-toggle="tab">Power Off</a></li>
        </ul>
        <ul class="tabs" id="actions-access">
            <li class="active"><a href="#action-console" data-toggle="tab">Console Access</a></li>
            <li><a href="#action-reset_root_password" data-toggle="tab">Reset Root Password</a></li>
        </ul>

        <div class="tab-contents">
           <div id="action-power_off">
                <p>This will power off your pc.</p>
                <p>...</p>
           </div>
           <div class="" id="action-power_cycle">
                <p>This will reboot your pc.</p>
                <p>...</p>
           </div>
           <div id="action-console">
                <p>...</p>
           </div>
           <div id="action-reset_root_password">
                <p>...</p>
          </div>
</div> 

<script>
    $(document).ready(function () {
        $("#action-tabs").tabs();
        });
</script>

Answer 1

据我所知，选择一个id只会选择遇到的第一个项目。如果要一次选择多个，则需要找到另一种选择对象的方法。例如，尝试为每个元素提供一个类，然后选择该类而不是id。

Answer 2

这是一个有效的例子：

http://jsfiddle.net/peTLa/1/

而不是将其他标签分组到列表中，我们可以向LI添加类名，然后我们可以隐藏并仅显示该类的元素

<li class="active other-tabs"><a href="#action-console" data-toggle="tab">Console Access</a></li>
<li class=" other-tabs"><a href="#action-reset_root_password" data-toggle="tab">Reset Root Password</a></li>


$(".other-tabs").hide();

我还添加了一个代码，用于在隐藏它们时选择第一个选项卡，因此如果隐藏时第3或第4个选项卡处于活动状态，则该选项卡不会保留内容。

$("#action-tabs").tabs('select', 0);

jquery init多个标签

2 个答案: