[jQuery] bootstrap nav-tabs auto change by location path

利用當前的location來決定active的class
bootstrap nav-tabs auto change by location path
先用html定義好nav-bar的部分,然後在js的部分動態的設定active class。
<ul class="nav nav-tabs" id="viewNav" role="tablist">
    <li><a href="/view/a">A</a></li>
    <li><a href="/view/b">B</a></li>
    <li><a href="/view/c">C</a></li>
</ul>

var currentPath = location.pathname;
$('#viewNav a').each(function() {
    if($(this).attr('href') == currentPath) {
        $(this).parent().addClass('active');
    }
});

var activaTab = function(tab){
    $('.nav-tabs a[href="\\/view\\/' + tab + '"]')
        .parent().addClass('active');
};

// active by parent path
activaTab('a')

沒有留言:

張貼留言