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

Question

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

现在，当我单击 Login_Button 时，我想显示 Login 选项卡，而单击 Registration_Button 时，我想显示 Registration 选项卡。但是这里总是先打开登录标签，虽然我点击了注册标签。

这是我的代码

<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

检查我下面的 sn-p 它正在工作

$('.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>

Answer 2

这就是你需要的。捕获单击按钮，您可以使用 javascript 单击选项卡。

我还将您的模式更改为 modal-content 类 modal-header 类

$("#btnlogin").on("click",function(){
    $("li#lilogin>a").click();
    console.log("Clicked Login");
});

$("#btnregis").on("click",function(){
    $("li#liregis>a").click();
    console.log("Clicked registration");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<button type="button" id="btnlogin" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Login Button</button>
<button type="button" id="btnregis" 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="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h2>Dynamic Tabs</h2>
      </div>
      <ul class="nav nav-tabs">
        <li id="lilogin"><a data-toggle="tab" href="#home">Login_Tab</a></li>
        <li id="liregis"><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>
</div>
</div>