时间戳

首页 > 解决方案 > 第一次单击后不显示引导选项卡下拉菜单

javascript - 第一次单击后不显示引导选项卡下拉菜单

问题描述

在下面的示例代码中，下拉选项卡的内容在第一次查看后不显示。

(function($) {
  $(function() {
    $('a[data-toggle = "tab"]').on('shown.bs.tab', function(e) {
      // Get the name of active tab
      var activeTab = $(e.target).text();

      // Get the name of previous tab
      var previousTab = $(e.relatedTarget).text();

      $(".active-tab span").html(activeTab);
      $(".previous-tab span").html(previousTab);
    });
  });

})(jQuery);
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

</head>

<body>
  <main class="main"></main>
  <hr>
  <p class="active-tab"><strong>Active Tab</strong>: <span></span></p>
  <p class="previous-tab"><strong>Previous Tab</strong>: <span></span></p>
  <hr>

  <ul class="nav nav-tabs" role="tablist" id="myTab">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>

    <li role="presentation"><a href="#account-details" aria-controls="Account Details" role="tab" data-toggle="tab">Details</a></li>

    <li class="dropdown">
      <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">
                Java
                <b class="caret"></b>
            </a>

      <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
        <li>
          <a href="#d1" data-toggle="tab">D1</a>
        </li>

        <li>
          <a href="#d2" data-toggle="tab">D2</a>
        </li>
      </ul>
    </li>
  </ul>

  <div class="tab-content">

    <div role="tabpanel" class="tab-pane active" id="home">
      <p>This is the home page</p>
    </div>

    <div role="tabpanel" class="tab-pane" id="account-details">
      <p>Pane 1</p>
    </div>

    <div role="tabpanel" class="tab-pane" id="d1">
      <p>Dropdown 1</p>
    </div>


    <div role="tabpanel" class="tab-pane" id="d2">
      <p>Dropdown 2</p>
    </div>
  </div>
  </main>
  <!-- Page style-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>

</html>

当活动选项卡成为下拉值之一 (D1/D2) 并且当您将活动选项卡更改为任何其他选项卡时，该Previous Tab:值变为空。

下拉菜单 1 被选中。 在此处输入图像描述 现在，如果我再次选择下拉菜单 1，我将看不到内容。

任何反馈表示赞赏。

谢谢你。

标签： javascriptjqueryhtmlbootstrap-4

解决方案

您正在混淆 Bootstrap v3 和 v4 导致此冲突，只需删除v4一个，（您的代码与v3兼容）

(function($) {
  $(function() {
    $('a[data-toggle = "tab"]').on('shown.bs.tab', function(e) {
      // Get the name of active tab
      var activeTab = $(e.target).text();

      // Get the name of previous tab
      var previousTab = $(e.relatedTarget).text();

      $(".active-tab span").html(activeTab);
      $(".previous-tab span").html(previousTab);
    });
  });

})(jQuery);
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<!-- Main -->
<main class="main">
  <hr>
  <p class="active-tab"><strong>Active Tab</strong>: <span></span></p>
  <p class="previous-tab"><strong>Previous Tab</strong>: <span></span></p>
  <hr />

  <ul class="nav nav-tabs" role="tablist" id="myTab">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>

    <li role="presentation"><a href="#account-details" aria-controls="Account Details" role="tab" data-toggle="tab">Details</a></li>
    <li class="dropdown">
      <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown"> Java<b class="caret"></b></a>

      <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
        <li>
          <a href="#d1" data-toggle="tab">D1</a>
        </li>
        <li>
          <a href="#d2" data-toggle="tab">D2</a>
        </li>
      </ul>
    </li>
  </ul>

  <div class="tab-content">

    <div role="tabpanel" class="tab-pane active" id="home">
      <p>This is the home page</p>
    </div>

    <div role="tabpanel" class="tab-pane" id="account-details">
      <p>Pane 1</p>
    </div>

    <div role="tabpanel" class="tab-pane" id="d1">
      <p>Dropdown 1</p>
    </div>

    <div role="tabpanel" class="tab-pane" id="d2">
      <p>Dropdown 2</p>
    </div>
  </div>
</main>
<!-- End main -->

推荐阅读