Các tab điều hướng Bootstrap với thanh tiến trình

Question

Tôi đang xây dựng một hệ thống đăng ký và tôi có một thanh tiến trình và một thẻ điều hướng bootstrap trong trang đó. Tôi đang cố gắng thiết lập JQuery để thanh tiến trình tiến bộ với các tab điều hướng. Đây là một hình ảnh.

Tôi cố gắng để đưa ra một đơn giản nếu khác jquery có điều kiện sử dụng chức năng hasClass và addClass nhưng không bao giờ nhận được để tạo ra một vết lõm.

Something như thế này:

$(document).ready(function() { 
    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { 
    if (".nav-tabs") hasClass(".active"); { 
     $(".checkout-bar li").addClass("active"); 
    } 
    }); 
}); 

Tôi gắn một CODEPEN

Bất kỳ ý tưởng về cách làm việc phía khách hàng này? Tôi muốn giữ C# trong số này

Answer 1

http://jsfiddle.net/o3637uwh/2/ (cập nhật)

trong html xóa biểu mẫu lớp tất cả thanh toán-bar li, ngoại trừ trước tiên

HTML

<ul class="checkout-bar"> 
    <li class="active"><a href="#get-started" data-toggle="tab">Get Started</a></li> 
    <li class=""><a href="#about-you" data-toggle="tab">About You</a></li> 
    <li class=""><a href="#looking-for" data-toggle="tab">Looking For</a></li> 
    <li class=""><a href="#">Review</a></li> 
</ul> 

JQ (cập nhật)

$(document).ready(function() { 
    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { 

     var href = $(e.target).attr('href'); 
     var $curr = $(".checkout-bar a[href='" + href + "']").parent(); 

     $('.checkout-bar li').removeClass(); 

     $curr.addClass("active"); 
     $curr.prevAll().addClass("visited"); 

    }); 
}); 

Answer 2

Bạn không chỉ định số .checkout-bar li nào để chọn. Bạn có để có được những chỉ số của .active tab và với chỉ số này chọn checkount li, tôi nghĩ bạn shoud làm một cái gì đó như thế này:

$(document).ready(function() { 
 
    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { 
 
    activeTabIndex = $('.nav.nav-tabs > li.active ').index(); 
 
    (".checkout-bar li.active").removeClass('active'); 
 
    $(".checkout-bar li:eq("+activeTabIndex+")").addClass('active') 
 
    }); 
 
});