我这里有一个代码:
<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。
单击锚点时,您需要获取不带
href
的 #
属性,如下所示:
$(this).attr("href").replace("#", "")
如果你想通过列表找到它,你可以这样做:
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');
我遇到了同样的问题,无法访问单击的nav-item的值,然后我尝试了下面的代码,它起作用了。
导航选项卡的 Html:
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="tab" role="tab" href="#info-time-sheets">
<span class="d-none d-sm-block">@L("Info")</span>
</a>
</li>
<li class="nav-item" id="tab-non-processed" >
<a class="nav-link" data-bs-toggle="tab" role="tab" href="#non-processed">
<span class="d-none d-sm-block">@L("Non processed ")</span>
</a>
</li>
<li class="nav-item" id="tab-previous-time-sheets">
<a class="nav-link" data-bs-toggle="tab" role="tab" href="#previous-time-sheets">
<span class="d-none d-sm-block">@L("Previous Timesheets")</span>
</a>
</li>
</ul>
我使用
e.currentTarget.id
作为 id
$('.nav-tabs li').on('click', (e) => {
if ((e.currentTarget.id === "tab-non-processed") || (e.currentTarget.id === "tab-previous-time-sheets")) {
$("#generate-documents").show();
$("#preview-timesheet").show();
}
else {
$("#generate-documents").hide();
$("#preview-timesheet").hide();
}
});