Anchor for Bootstrap tabs

Question

Hi, I’m doing a question and answer panel, where I use the bootstrap tabs to better organize the questions. I wanted every time the user answered a question, jumped to the next one, but I can’t do it as an anchor, I searched the internet, but I only found it with URL.

Follow a picture:

And when the person clicks finish I send a confirm asking if he is sure he wants to finish. And he wanted that if the user did not confirm, return to the tab that he was on, but otherwise he would go to the tab "finish". I just wanted the way to create this anchor for tabs without having the need for the user to click each one...

Anyone who can help, I’d like to thank!

Answer 1

Follows the codes:

<li><a data-toggle="tab" id="botaoFinalizar" onclick="confirmarEnvioQuestionario();">Finalizar</a></li>

The one on top is the Button to finish (I didn’t put the href="#finish" because it does it after the function and everything).

<li <?php echo ($r == 1) ? "class='active'" : "" ?>><a data-toggle="tab" href="#pergunta-<?php echo $r ?>"><?php echo $r ?></a></li>

Here in the case is the loop that I do to show the questions, but so far there is no problem, it works normal. The problem is that it does not anchor and also nothing appears on the console.

function confirmarEnvioQuestionario(){
//VALIDA PARA VER SE PREENCHEU TODOS OS CAMPOS
//SE SIM, PEDE PARA CONFIRMAR
if(validaCampos()){
    var c = confirm("Tem certeza que quer finalizar o questionário?");
}
else{
    alert("Responda todas as questões primeiro!");
    return false;
}
if(c == true){
    $('#finalizar').tab('show');
    carregaResultadoQuestionario();
}
else{
    $('#pergunta-1').tab('show');
}

}

And before you ask, yes, all the functions that are in this script are working and the tabs are with the corresponding id’s.

Answer 2

To change the tab via JS you can use the following command:

$('#id_tab').tab('show');

If you want to display the hash in the URL when changing tabs you can add the following function in your JS file:

$(function(){
  var hash = window.location.hash;
  hash && $('ul.nav a[href="' + hash + '"]').tab('show');

 $('.nav-tabs a').click(function (e) {
    $(this).tab('show');
    var scrollmem = $('body').scrollTop() || $('html').scrollTop();
    window.location.hash = this.hash;
    $('html,body').scrollTop(scrollmem);
  });
});

---

Source:https://stackoverflow.com/questions/12131273/twitter-bootstrap-tabs-url-doesnt-change