javascript - 通过单击 html 中的特定按钮转到特定选项卡

Question

我有一个带有两个选项卡的模式 Login 和 Registration。我还有两个名为 Login_Button 和 Registration_Button 的按钮。

现在，当我点击 Login_Button 时，我想显示 Login 选项卡以及点击 Registration_Button 想要显示 注册标签。但是这里总是先打开登录选项卡，尽管我点击了注册选项卡。

这是我的代码

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Login Button</button>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Registration Button</button>
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="container">
    <h2>Dynamic Tabs</h2>
      <ul class="nav nav-tabs">
        <li><a data-toggle="tab" href="#home">Login_Tab</a></li>
        <li><a data-toggle="tab" href="#menu1">Registration_Tab</a></li>
      </ul>
    <div class="tab-content">
      <div id="home" class="tab-pane fade in active">
        <h3>Login</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="tab-pane fade">
        <h3>Registration</h3>
          <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
    </div>
  </div>
</div>

我用过bootstrap css和js

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.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"></script>

我已经搜索了Here

但没有得到我想要的结果。有人帮忙吗？

Answer 1

检查我下面的代码片段是否有效

$('.modal-toggle').click(function (e) {
    var tab = $(this).data('href');
    $('li > a[href="' + tab + '"]').tab("show");
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.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"></script>


<button type="button" class="btn btn-primary btn-lg modal-toggle" data-toggle="modal" data-target="#myModal" data-href="#home">Login Button</button>
<button type="button" class="btn btn-primary btn-lg modal-toggle" data-toggle="modal" data-target="#myModal" data-href="#menu1">Registration Button</button>
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="container">
    <h2>Dynamic Tabs</h2>
      <ul class="nav nav-tabs">
        <li><a data-toggle="tab" href="#home" >Login_Tab</a></li>
        <li><a data-toggle="tab" href="#menu1">Registration_Tab</a></li>
      </ul>
    <div class="tab-content">
      <div id="home" class="tab-pane fade in active">
        <h3>Login</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="tab-pane fade">
        <h3>Registration</h3>
          <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
    </div>
  </div>
</div>