Question

我有一个标签形式，整个事情是在一个表单元素中制作的，其想法是根据用户提交的表单处理不同的信息。我可以使用filter（），而不是（）和类来过滤表单结果，但我需要一种方法来“检查”哪个选项卡是活动选项卡。

我也不能使用不同的提交按钮或不同的表单ID，因为标签位于另一个标签内，所有标签都提交给同一个脚本

<div class="container">
  <div class="tabbable">
    <ul class="nav nav-tabs">
      <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
      <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
    </ul>
    <div class="tab-content">
      <div class="tab-pane active" id="tab1">
        <p>Sides</p>
    <input type="radio" name="bread3" value="VanW" checked>White <br>
    <input type="radio" name="bread3" value="VanB">Brown
      </div>
      <div class="tab-pane" id="tab2">
        <p>I'm in Section 2.</p>
        <div class="span8">
        <div class="tabbable tabs-left">
        <ul class="nav nav-tabs">
          <li class="active"><a href="#tab3" data-toggle="tab">Section 3</a></li>
          <li><a href="#tab4" data-toggle="tab">Section 4</a></li>
        </ul>
        <div class="tab-content">
          <div class="tab-pane active" id="tab3">
            <p>Hamburger</p>
    <input type="radio" name="bread" value="VanW" checked>White <br>
    <input type="radio" name="bread" value="VanB">Brown
          </div>
          <div class="tab-pane" id="tab4">
            <p>Pizza</p>
    <input type="radio" name="bread2" value="VanW" checked>White <br>
    <input type="radio" name="bread2" value="VanB">Brown
          </div>
        </div>
        </div>
      </div>      
      </div>
    </div>
  </div>
</div>

Answer 1

要查找活动标签，您可以检查哪个标签具有“有效”类。

var $activeTab = $('.nav-tabs li.active');

然后，您可以使用它来获取所需的任何其他信息。

var $activePanel = $($('a', $activeTab).attr('href'));

或者只是在面板上查找“活动”类

var $activePanel = $('.tab-content>.active');

更新仅检查内部标签

如果你知道标签位于tab2：

var $activeTab = $('#tab2 .nav-tabs li.active');
var $activePanel =  $('#tab2 .tab-content>.active');

如果您只知道它是活动标签的标签：

var $activeTab = $('.tab-content>.active .nav-tabs li.active');
var $activePanel =  $('.tab-content>.active .tab-content>.active');

用于单选按钮信息的Bootstrap选项卡

1 个答案: