Cách mở một phương thức Bootstrap với một tab cụ thể đang hoạt động

Question

Tôi đang cố gắng để có thẻ trong chế độ khởi động khởi động tùy thuộc vào liên kết nào đang được nhấp. Không có vấn đề gì tôi đã thử nó sẽ chỉ mở ra trên tab đầu tiên. Hai liên kết như sau:

<a href="#tab-mileage" data-toggle="modal" data-target="#buyers-report-modal" >Mileage</a> 
<a href="#tab-wrong-vehicle" data-toggle="modal" data-target="#buyers-report-modal">Wrong vehicle?</a> 

và đánh dấu cho các phương thức là ở đây:

<div class="modal" id="buyers-report-modal" tabindex="-1" role="dialog" aria-hidden="true"> 
    <div class="modal-dialog modal-lg modal-offset-top"> 
    <div class="modal-content"> 
    <div class="modal-body"> 
    <div class="sd-tabs sd-tab-interaction"> 
     <div class="row"> 
     <ul class="nav nav-tabs col-md-3 custom-bullet"> 

      <li class="active"><a data-toggle="tab" href="#tab-wrong-vehicle"> Wrong Vehicle?</a></li> 
      <li><a data-toggle="tab" href="#tab-mileage"> Mileage</a></li> 

     </ul> 
     <div class="tab-content col-md-9"> 
      <form id="tab-wrong-vehicle" class="tab-pane active" action="" method="post"> <!-- Wrong Vehicle? --> 

      <h3 class="tab-title">Tab 1</h3> 

      </form> <!-- Wrong Vehicle? --> 



      <form id="tab-mileage" class="tab-pane"> <!-- Mileage --> 

      <h2 class="tab-title-resp hidden-md hidden-lg"> Mileage</h2> 
      <h3 class="tab-title">Tab 2</h3> 

      </form> <!-- Mileage --> 

     </div> 
     </div> 
    </div> 
    </div> 
</div> 

tôi cần những phương thức để mở ra vào liên kết được nhấp, ví dụ, nếu tôi là để nhấp vào liên kết thứ hai, nó sẽ mở tab thứ hai trong phương thức. Bất kỳ sự giúp đỡ nào sẽ được đánh giá cao, tôi đã không thể tìm ra giải pháp cho bất cứ nơi nào.

Tôi đã để nguyên ID gốc trong trường hợp mã tôi đã mắc lỗi khi thay thế chúng.

Answer 1

Tôi đã thêm một lớp .modal-toggle để các yếu tố <a> chuyển đổi các phương thức. Hơn nữa, tôi đã thêm một số chức năng bổ sung kích hoạt trên nhấp chuột và nhận được href của phần tử được nhấp, sau đó tôi đang sử dụng tab("show") trên phần tử <a> bên trong <li> khớp với href. (Tôi đã thêm một nút đóng bên trong phương thức của bạn, vì vậy nó dễ dàng hơn để kiểm tra bản demo)

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

Demo Fiddle

Answer 2

Bạn cần nhắm mục tiêu neo của tab và chạy hàm $.tab('show').

http://getbootstrap.com/javascript/#tabs

Vì bạn biết neo tab có thuộc tính của dữ liệu chuyển đổi = tab và href = id chúng ta có thể sử dụng a href từ liên kết để vượt qua để chọn cho tab.

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

DEMO: http://jsfiddle.net/SeanWessell/2ct9zuu9/

Answer 3

Đưa những lợi ích của sự kiện shown.bs.modal. Sự kiện này nắm giữ thông tin về href của nhấp <a>, và sau đó bạn có thể thay đổi các tab theo rằng:

$("#buyers-report-modal").on('shown.bs.modal', function(e) { 
    var tab = e.relatedTarget.hash; 
    $('.nav-tabs a[href="'+tab+'"]').tab('show') 
}) 

mã làm việc của bạn ->http://jsfiddle.net/pvo1sny8/