代码之家 › 专栏 › 技术社区 › AhammadaliPK

jquery:如何获取当前激活页签的id[重复]

html jquery

AhammadaliPK · 技术社区 · 8 年前

这个问题已经有了答案:

Need currently selected tab ID for jQuery tabs 10个答案

我有一些标签如下

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

2 回复 | 直到 8 年前

Rudolf Manusachi 8 年前

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

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>

GreyRoofPigeon 8 年前

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

你想要的 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=“地图控制”class=“导航项”>
<a class=“nav link active”data toggle=“tab”ref=“m_tabs_1_1”>映射</a>
</li>
<li id=“feature_control”class=“nav item”>
<a class=“nav link”data toggle=“tab”的功能lt;/a>
</li>
<li id=“analysis”class=“nav item”>
&分析
</li>
<li id=“编辑控件”class=“nav item”>
&编辑
</li>
<li id=“General_div”class=“Nav item”>
<a class=“nav link”data toggle=“tab”href=“m_tabs_1_6”>常规</a>
</li>
</ul>