Question

我正在使用bootstrap 3，我目前在页面上有3个标签，如此

<ul class="nav nav-tabs" role="tablist">
      <li role="presentation" class="active"><a href="#one" aria-controls="one" role="tab" data-toggle="tab">One </a></li>
      <li role="presentation"><a href="#two" aria-controls="two" role="tab" data-toggle="tab">Two </a></li>
      <li role="presentation"><a href="#three" aria-controls="three" role="tab" data-toggle="tab"> Three</a></li>
 </ul>

目前我可以调用它来激活/显示像

这样的特定标签

 $('.nav-tabs a[href="#one"]').tab('show');

但是，让我说我在另一个标签上，我在该标签上更新了一些内容，然后我想显示该活动标签。我该怎么做？

UPDATE 我添加了这个

var activetab = $('.allschedules').find('li.active');

返回一个具有当前选项卡属性的对象。我如何得到a href的名字？

Answer 1

您可以执行第二个查询以查找子<a>元素，然后检查其hash属性以获取href中的名称。

＆＃13;

var activeTabName = $('li.active').find('a')[0].hash;
$('#active-tab-name').text(activeTabName);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<ul class="nav nav-tabs" role="tablist">
      <li role="presentation" class="active"><a href="#one" aria-controls="one" role="tab" data-toggle="tab">One </a></li>
      <li role="presentation"><a href="#two" aria-controls="two" role="tab" data-toggle="tab">Two </a></li>
      <li role="presentation"><a href="#three" aria-controls="three" role="tab" data-toggle="tab"> Three</a></li>
</ul>

<span id="active-tab-name"></span>

＆＃13;

如何判断哪个选项卡处于活动状态

1 个答案: