如何让链接打开Bootstrap模态中的特定选项卡? [英] How do I have links open a specific tab inside a Bootstrap modal?

问题描述

我在网页底部有5个链接.它们链接到具有与网页上的链接相匹配的选项卡的Bootstrap模态，但是它始终默认为第一个选项卡/选项卡内容.如何使链接在模式中打开正确的选项卡/选项卡内容.

I have 5 links at the bottom of a webpage. They link to a Bootstrap modal with tabs that match the links on the webpage, but it always defaults to the first tab/tab content. How can I have the links open the correct tab/tab content in the modal.

这是我的模态代码和网页上的链接:

Here is my code for the modal and the links that are on the webpage:

<div id="LegalModal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
    <div class="modal-dialog modal-lg" role="document">

    <div class="modal-content">

    <div class="modal-header" style="background-color:#283c5a; border-radius: 5px 5px 0 0;">
        <a href="#" class="btn btn-primary pull-right" data-dismiss="modal">Close</a>
        <h3>rateGenius Legal Terms & Agreements</h3>
    </div>

    <div class="modal-body">
        <div class="tabbable"> <!-- Only required for left/right tabs -->
            <ul class="nav nav-tabs">
                <li class="active"><a class="tab1" href="#tab1" data-toggle="tab">Terms of Use</a></li>
                <li><a href="#tab2" data-toggle="tab">Privacy Policy</a></li>
                <li><a href="#tab3" data-toggle="tab">Mobile Privacy Policy</a></li>
                <li><a href="#tab4" data-toggle="tab">Security</a></li>
                <li><a href="#tab5" data-toggle="tab">Licensing</a></li>
            </ul>

            <div class="tab-content" id="tabs" style="padding:30px;">

                <div class="tab-pane active" id="tab1">
                    <h1>Terms of Use</h1>

                </div>
                <div class="tab-pane" id="tab2">
                    <h1>Privacy Policy</h1>
                </div>
                <div class="tab-pane" id="tab3">
                   <h1>Mobile Privacy Policy</h1>
                </div>
                <div class="tab-pane" id="tab4">
                    <h1>Security</h1>
                </div>
                <div class="tab-pane" id="tab5">
                    <h1>Licensing</h1>
                </div>
            </div>
            </div>
        <div class="modal-footer">
            <a href="#" class="btn btn-primary" data-dismiss="modal">Close</a>
        </div>
        </div>
        </div>
    </div>
</div>

<ul class="list-unstyled" style="text-align:center;">
    <li><a href="#LegalModal" data-target=".bs-example-modal-lg" data-toggle="modal" >Terms of Service</a></li>
    <li><a href="#LegalModal" data-target=".bs-example-modal-lg" data-toggle="modal" >Privacy Policy</a></li>
    <li><a href="#LegalModal" data-target=".bs-example-modal-lg" data-toggle="modal" >Mobile Privacy Policy</a></li>
    <li><a href="#LegalModal" data-target=".bs-example-modal-lg" data-toggle="modal">Security</a></li>
    <li><a href="#LegalModal" data-target=".bs-example-modal-lg" data-toggle="modal">Licensing</a></li>
</ul>

推荐答案

通过将一些自定义jQuery链接到链接上，使锚点同时切换模式和正确的选项卡:

Have the anchor toggle both the modal and the correct tab by hooking up some custom jQuery to the links:

$(function() {
  $('.legal-tabs li').on('click', function() {
    var tab = $(this).index();
    $('#LegalModal .modal-body .nav-tabs a:eq(' + tab + ')').tab('show');
  });
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<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.5/js/bootstrap.min.js"></script>

<div id="LegalModal" class="modal fade bs-example-modal-lg">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-body">
        <div class="tabbable"> <!-- Only required for left/right tabs -->
          <ul class="nav nav-tabs">
            <li class="active"><a class="tab1" href="#tab1" data-toggle="tab">Tab 1</a></li>
            <li><a href="#tab2" data-toggle="tab">Tab 2</a></li>
          </ul>
          <div class="tab-content" id="tabs" style="padding:30px;">
            <div class="tab-pane active" id="tab1">
            <h1>Terms of Use</h1>                      
            </div>
            <div class="tab-pane" id="tab2">
              <h1>Privacy Policy</h1>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<ul class="list-unstyled legal-tabs" style="text-align:center;">
  <li><a href="#LegalModal" data-target=".bs-example-modal-lg" data-toggle="modal">Show tab 1</a></li>
  <li><a href="#LegalModal" data-target=".bs-example-modal-lg" data-toggle="modal">Show tab 2</a></li>
</ul>

这篇关于如何让链接打开Bootstrap模态中的特定选项卡?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！