我需要使用jQuery获取活动选项卡的id值

时间:2017-09-03 04:41:53

标签: javascript jquery html css twitter-bootstrap

我的代码在这里:

<ul class="nav nav-pills nav-justified" id="pills-COD">
     <li class="active"><a data-toggle="tab" href="#a">Class A</a></li>
     <li><a data-toggle="tab" href="#b">Class B</a></li>
     <li ><a data-toggle="tab" href="#c">Class C</a></li>
    <li><a data-toggle="tab" href="#d">Class D</a></li>
</ul>

<div class="tab-content">
  <div id="a" class="tab-pane fade in active">
    <h3>HOME</h3>
    <p>Some content.</p>
  </div>
  <div id="b" class="tab-pane fade">
   <h3>Menu 1</h3>
   <p>Some content in menu 1.</p>
  </div>

  <div id="c" class="tab-pane fade">
   <h3>Menu 2</h3>
   <p>Some content in menu 2.</p>
  </div>
</div>

每当使用id点击药丸时,我需要获取有效标签的jQuery。 例如,我需要在点击"a"li时获得值"Class A"

我在堆栈溢出中发现了其他研究,但.tabs()在jQuery中对我不起作用。其他解决方案也显示了href值,但我需要活动标签的标签ID。

2 个答案:

答案 0 :(得分:0)

点击主播后,您需要获取href属性,而不是#,如下所示:

$("ul.nav-pills > li > a").click(function() {
   alert($(this).attr("href").replace("#", ""))
});

attr("href")从点击的锚点中获取href值。并replace用空字符串替换#

答案 1 :(得分:0)

如果您想查找列表,可以执行以下操作:

var $activeLi = $('#pills-COD li.active');
var activeId = $activeLi.children('a').attr('href').substr(1);

或者,查看标签:

var $activeTab = $('.tab-content .tab-pane.active');
var activeId = $activeTab.attr('id');