jQuery：如何获取当前激活选项卡的 id [重复]答案

【问题标题】：jQuery : how to get id of current activated tab [duplicate]jQuery：如何获取当前激活选项卡的 id [重复]
【发布时间】：2018-07-03 08:22:12
【问题描述】：

我有一些标签如下

我需要获取当前激活标签的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>

【问题讨论】：

不是一个重复的问题，这个答案不适合我的需要，我已经试过了。 stackoverflow.com/questions/1864219/…

标签： jquery html

【解决方案1】：

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

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>

【讨论】：

【解决方案2】：

我希望你的问题是正确的。

你想要<li> 的id 对吗？

然而，活动状态位于<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>

【讨论】：

我会建议 .parent() 这个，因为我们已经知道当前元素是 <a>。
你是对的，在这个特定的案例中，罗恩。可能需要注意的是，当 OP 添加额外元素时，parent() 将不起作用，但 closest() 会。