如何链接打开Bootstrap模式中的特定选项卡？

Question

我在网页底部有5个链接。它们通过与网页上的链接匹配的选项卡链接到Bootstrap模式，但它始终默认为第一个选项卡/选项卡内容。如何让链接在模式中打开正确的制表符/制表符内容。

这里是我的模态代码是网页上的链接：

<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> 

Answer 1

有锚切换两种模式，并通过一些定制的jQuery挂钩的链接正确的标签：

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