JQuery - вкладки бутстрапа не меняются при нажатии

Question

Я использую bootstrap modal для формы, которая должна быть заполнена в два этапа. Внутри модального я использую вкладки для отображения двух форм. Ниже мой уль внутри модального тела:

<ul id="example-user-tabs" class="nav nav-tabs" data-toggle="tabs"> 
<li id="tab1" class="active"><a href="#form1_details" data-toggle="tab">FORM1</a></li> 
<li id="tab2"><a href="#questionaire" data-toggle="tab">Questionaire</a></li> 
</ul> 

Ниже, как определяются вкладка Панели:

<div class="tab-pane active in" id="form1_details"> 
<div class="tab-pane active in" id="questionaire"> 

Обе вышеуказанные стекла имеют формы внутри них. Теперь ручное изменение вкладок работает нормально, но не через программирование jquery.

Внутри первой формы, у меня есть связь, которая при нажатии на, следует переключить вкладки:

<a href="javascript:void(0);" id="to_questionaire">Next</a> 

и ниже, что я делаю с помощью JQuery для переключения вкладок .Но почему-то ничего не происходит вообще .

$("#to_questionaire").click(function(){ 
     $('#example-user-tabs a[href="#questionaire"]').tab('show'); 
    }); 

Было бы здорово, если бы кто-то знал, как это сделать.

ПРИМЕЧАНИЕ. Пожалуйста, не отмечайте это как дублирующее, так как ни одно из решений потоков Stackoverflow не решило мою проблему. Я сделал их все.

Answer 1

Кулака все, что вам неправильно идентификатор в вашем JS вызывает нет «to_questions» в HTML

и рабочий код должен выглядеть следующим образом

$("#to_questionaire").on('click',function(){ 
    $('.active').removeClass('active'); 
     $('#example-user-tabs li').next('li').find('a[href="#questionaire"]').addClass('active').tab('show'); 
    });