Anchor for Bootstrap tabs

Question

Anchor for Bootstrap tabs

Navigation

#1 by (0 votes)
#2 by (0 votes)

1

Hello, I am doing a question and answer panel, in which 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 not do that as an anchor, I searched the internet, but just found a URL.

Follow a photo:

Andwhenthepersonclicksontheend,I'llsendaconfirmationaskingifhe'ssurehewantstofinish.AndIwanteditiftheuserdidnotconfirm,gobacktothetabhewasin,butotherwisehewenttothe"end" tab. I wanted only the way to create this anchor for the tabs without having the user need to click on each ...

Anyone who can help, thank you in advance!

jquery twitter-bootstrap

asked by anonymous 13.05.2016 / 22:12

2 answers

require command does not work in gem for ruby assign radio value found in sql - Codeigniter

score 0 · Answer 1

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 by changing the 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: link

score 0 · Answer 2

Follow the codes:

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

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

Here is the loop that I do to show the questions, but so far no problem, it works normal. The problem is that it does not do the 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 function are working and the tabs have the corresponding id's.