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

Question

我这里有一个代码：

<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。

Answer 1

单击锚点时，您需要获取不带

href

的

#

属性，如下所示：

$(this).attr("href").replace("#", "") 

Answer 2

如果你想通过列表找到它，你可以这样做：

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');

Answer 3

我遇到了同样的问题，无法访问单击的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();
        }
    });