无法查找到选中状态下选项卡的id

以下jquery写法无法查找到选中状态下选项卡的id


<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap5 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>


<div class="container mt-3" id="list">
  <h2>选项卡切换</h2>
  <br>
  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" data-bs-toggle="tab" href="#home">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-bs-toggle="tab" href="#menu1">Menu 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-bs-toggle="tab" href="#menu2">Menu 2</a>
    </li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div id="home" class="container tab-pane active"><br>
      <h3>HOME</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div id="menu1" class="container tab-pane fade"><br>
      <h3>Menu 1</h3>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div id="menu2" class="container tab-pane fade"><br>
      <h3>Menu 2</h3>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
    </div>
  </div>    
</div>
<script>
    $(".tab-pane.active").attr("id");//查不到？
</script>

</body>
</html>

不知道你这个问题是否已经解决, 如果还没有解决的话:

帮你找了个相似的问题, 你可以看下: https://ask.csdn.net/questions/946809
这篇博客也不错, 你可以看下jquery无法解析id的问题
除此之外, 这篇博客: 初识jQuery中的 ID选择器 部分也许能够解决你的问题, 你可以仔细阅读以下内容或者直接跳转源博客中阅读:
ID选择器根据给定的id匹配元素

以下回答来自chatgpt:

作为AI语言模型, 我无法提供确切的回答, 希望您有哈密尔顿建议阅读相关资料或者常用jQuery插件的文档。以下是可能有参考价值的jQuery插件和示例代码:

其中jQuery UI是常用的一款jQuery插件, 也可以使用Bootstrap自带的选项卡组件来实现。

<!-- HTML代码 -->
<ul class="nav nav-tabs">
  <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
  <li><a href="#profile" data-toggle="tab">Profile</a></li>
  <li><a href="#messages" data-toggle="tab">Messages</a></li>
  <li><a href="#settings" data-toggle="tab">Settings</a></li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="home">This is the home tab.</div>
  <div class="tab-pane" id="profile">This is the profile tab.</div>
  <div class="tab-pane" id="messages">This is the messages tab.</div>
  <div class="tab-pane" id="settings">This is the settings tab.</div>
</div>

// jQuery代码
$(function () {
  $('ul.nav-tabs li').click(function (e) {
    e.preventDefault();
    $(this).siblings().removeClass('active');
    $(this).addClass('active');
    var tab = $(this).children().attr('href');
    $('.tab-content > div').not(tab).hide();
    $(tab).fadeIn(400);
  });
});

以上代码使用了Bootstrap自带的选项卡组件, 只需要在HTML中添加正确的标签和属性, 然后通过jQuery进行事件绑定即可实现选项卡的功能。请注意, 在使用以上代码前需要先引入jQuery和Bootstrap相关文件。

另外, 如果您需要更为个性化的选项卡组件, 也可以使用其他的jQuery插件, 比如jQuery Tabs、Simple Tabs等等, 在使用时需要查看对应插件的文档, 并按照规则添加HTML结构和相关JavaScript代码即可。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^

看我这个篇文章, 如有帮助给个采纳谢谢
https://mp.csdn.net/mp_blog/creation/editor/83069922