Bootstrap нав-вкладки проверить для выбранной вкладки с помощью JQuery

Question

У меня есть следующие Bootstrap вкладки нав:

<div class="row spiff_tabs_body"> 
      <!-- Nav tabs --> 
      <ul class="nav nav-tabs spiff_tabs" role="tablist"> 
       <li role="presentation" class="active"> 
        <a href="#home" aria-controls="home" role="tab" data-toggle="tab" onclick="FormGet('dashboard/delayedspiff', 'delayedspiff')">Potential Spiff</a> 
       </li> 
       <li role="presentation"> 
        <a href="#profile" aria-controls="profile" role="tab" data-toggle="tab" onclick="FormGet('dashboard/instantspiff', 'delayedspiff')">Instant Spiff</a> 
       </li> 
      </ul> 
      <!-- Tab panes --> 
      <div class="tab-content"> 
       <div role="tabpanel" class="tab-pane active" id="delayedspiff"></div> 
       <div role="tabpanel" class="tab-pane" id="instantspiff"></div> 
      </div> 
     </div> 
    </div> 
</div> 

Мне нужно, чтобы быть в состоянии проверить, какая вкладка выбрана, а затем отобразить предупреждение. У меня есть следующие JavaScript на мой взгляд:

<script> 
$(function() { 
    FormGet('dashboard/delayedspiff', 'delayedspiff');   
}); 
</script> 

<script> 
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { 
    // here is the new selected tab id 
    var selectedTabId = e.target.id; 
    var id = $('.tab-content .active').attr('id'); 
    if (id == "delayedspiff") { 
     alert("delayedspiff"); 
    } else { 
     alert("instantspiff"); 
    } 
}); 
</script> 

При нажатии вкладки это работает, но тревога всегда отображается delayedspiff. Мне нужно отключить instantspiff, когда они нажимают на вкладку instantspiff. Может ли кто-нибудь увидеть, что я делаю неправильно?

Answer 1

Вам нужно всего лишь удалить класс active со всех вкладок и добавить его на вкладку, на которую была нажата кнопка.

РЕДАКТИРОВАТЬ: Чтобы получить вкладку идентификатора щелчка, попробуйте использовать идентификатор данных атрибута на вкладках.

<li role="presentation" class="active"> 
        <a href="#home" aria-controls="home" role="tab" data-id="delayedspiff" data-toggle="tab" onclick="FormGet('dashboard/delayedspiff', 'delayedspiff')">Potential Spiff</a> 
       </li> 
       <li role="presentation"> 
        <a href="#profile" aria-controls="profile" data-id="instantspiff" role="tab" data-toggle="tab" onclick="FormGet('dashboard/instantspiff', 'delayedspiff')">Instant Spiff</a> 
       </li> 

<script> 
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { 
    var wrongid = $('.tab-content .active').attr('id'); 
    $('a[data-toggle="tab"]').removeClass("active"); // remove class active from all tabs 
    $(this).addClass("active"); // add class active to the current tab 
    var correctid = $(this).data("id"); // get the attribute data-id of the clicked tab 
    alert($('.tab-content .active')[0].outerHTML); // shows why you are getting the incorrect id 
    if (correctid == "delayedspiff") 
     alert("delayedspiff"); 
    else 
     alert("instantspiff");  
}); 
</script> 

Обновлено скрипка: https://jsfiddle.net/DTcHh/14313/