Question

我有一些如下标签

我需要获取当前激活的选项卡的ID，我尝试了很多方法，仍然没有运气，

1. $('ul#apptabs li a').find('active').attr('id')
2. $('ul#apptabs li a.active').attr('id')
3. $('ul#apptabs nav-item').find('a.active').attr('id')

摘要：

console.log(
  $('ul#apptabs li a').find('active').attr('id'),
  $('ul#apptabs li a.active').attr('id'),
  $('ul#apptabs nav-item').find('a.active').attr('id')
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="apptabs" class="nav nav-pills" role="tablist" style="margin:0px">
  <li id="map_control" class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#m_tabs_1_1">Map</a>
  </li>
  <li id="feature_control" class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#m_tabs_1_3">Feature</a>
  </li>
  <li id="analysis" class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#m_tabs_1_4">Analysis</a>
  </li>
  <li id="editing_control" class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#m_tabs_1_5">Editing</a>
  </li>
  <li id="general_div" class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#m_tabs_1_6">General</a>
  </li>
</ul>

Answer 1

希望我能正确回答你的问题。

您希望id中的<li>正确吗？

但是，活动状态位于<a>的子项<li>上。因此，您需要向上移动DOM树以找到列表项。您可以使用closest()来做到这一点。

console.log(
  $('ul#apptabs li a.active').closest('li').attr('id')
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="apptabs" class="nav nav-pills" role="tablist" style="margin:0px">
  <li id="map_control" class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#m_tabs_1_1">Map</a>
  </li>
  <li id="feature_control" class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#m_tabs_1_3">Feature</a>
  </li>
  <li id="analysis" class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#m_tabs_1_4">Analysis</a>
  </li>
  <li id="editing_control" class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#m_tabs_1_5">Editing</a>
  </li>
  <li id="general_div" class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#m_tabs_1_6">General</a>
  </li>
</ul>

或其他选择：

$('ul#apptabs li').has('a.active').attr('id')

console.log(
  $('ul#apptabs li').has('a.active').attr('id')
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="apptabs" class="nav nav-pills" role="tablist" style="margin:0px">
  <li id="map_control" class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#m_tabs_1_1">Map</a>
  </li>
  <li id="feature_control" class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#m_tabs_1_3">Feature</a>
  </li>
  <li id="analysis" class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#m_tabs_1_4">Analysis</a>
  </li>
  <li id="editing_control" class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#m_tabs_1_5">Editing</a>
  </li>
  <li id="general_div" class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#m_tabs_1_6">General</a>
  </li>
</ul>

Answer 2

一种可能的方法是返回父节点

console.log($('ul#apptabs li a.active').parent().attr('id'))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="apptabs" class="nav nav-pills" role="tablist" style="margin:0px">
  <li id="map_control" class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#m_tabs_1_1">Map</a>
  </li>
  <li id="feature_control" class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#m_tabs_1_3">Feature</a>
  </li>
  <li id="analysis" class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#m_tabs_1_4">Analysis</a>
  </li>
  <li id="editing_control" class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#m_tabs_1_5">Editing</a>
  </li>
  <li id="general_div" class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#m_tabs_1_6">General</a>
  </li>
</ul>

jQuery：如何获取当前已激活标签页的ID

2 个答案: