Link from a list-group within a tab to the next tab

Navigation
0

I have a bootstrap wizard with progress bar, the original example is that every time you click on a tab advance the progress bar, my intention is to take advantage of this code to insert a list-group in each tab and that when doing click on any of the elements of the list-group take me to the next tab. You can give me a hand with this please.

Thank you in advance for any kind of collaboration.

Greetings.

HTML: 

<div id="bar" class="progress" style="margin-top: 20px;">
    <div class="progress-bar progress-bar-success" role="progressbar" aria- 
    valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"> 
    </div>
</div>

<div id="Wizard" class="wizard">
    <ul style="">
        <li><a href="#tab1" data-toggle="tab">Datos Personales</a></li>
        <li><a href="#tab2" data-toggle="tab">Solicitud Matricula</a></li>
        <li><a href="#tab3" data-toggle="tab">Ebook</a></li>
        <li><a href="#tab4" data-toggle="tab">Resumen</a></li>
    </ul>

<div class="tab-content">
    <div class="tab-pane" id="tab1">
        <h2>¿Cuántas personas trabajan en tu empresa?</h2>  
        <div class="list-group">
            <a href="#" class="list-group-item">a. Sólo yo</a>
            <a href="#" class="list-group-item">b. Entre 2 y 10 personas</a>
            <a href="#" class="list-group-item">c. Más de 10 personas</a>                   
        </div> 
    </div>
    <div class="tab-pane" id="tab2">
        <h2>¿Qué sistema operativo utilizas en tu computador?</h2>
        <div class="list-group wizard">
            <a href="#" class="list-group-item">a. No uso computador</a>
            <a href="#" class="list-group-item">b. No sé / No estoy 
            seguro</a>
            <a href="#" class="list-group-item">c. Windows</a>
            <a href="#" class="list-group-item">d. MacOS</a>
            <a href="#tab3" class="list-group-item">e. Linux</a>
        </div> 
    </div>
    <div class="tab-pane" id="tab3">
        Ebook
    </div>
    <div class="tab-pane" id="tab4">
        Resumen
    </div>

    <ul class="pager wizard">
        <li class="previous first" style="display:none;"><a href="#">Primero</a></li>
        <li class="previous"><a href="#">Anterior</a></li>
        <li class="next last" style="display:none;"><a href="#">Ultimo</a></li>
        <li class="next"><a href="#">Siguiente</a></li>
    </ul>

</div>

javascript: 

$(document).ready(function() {
    $('#').bootstrapWizard();
});

$(document).ready(function() {
    $('.wizard').bootstrapWizard({onTabShow: function(tab, navigation, index) {
        var $total = navigation.find('li').length;
        var $current = index+1;
        var $percent = ($current/$total) * 100;
        $('.progress-bar').css({width:$percent+'%'});
    }});
});
    
asked by Melvin Pérez 31.10.2018 в 02:25
source

1 answer

1

To do what you indicate, you could click on the next button when an option has been selected. Example: 

$(document).ready(function() {
    $('#').bootstrapWizard();
});

$(document).ready(function() {
    $('.wizard').bootstrapWizard({onTabShow: function(tab, navigation, index) {
        var $total = navigation.find('li').length;
        var $current = index+1;
        var $percent = ($current/$total) * 100;
        $('.progress-bar').css({width:$percent+'%'});
    }});
});

$(document).ready(function()  {
  $('.list-group-item').click(function () {
    var tabs = $('.tab-content').children();
    var tabsLength = tabs.length;
    var i = 0;
    // recorremos los tabs para obtener el indice del tab activo (actual)
    for (i = 0; i < tabsLength; i++) {
      if ($(tabs[i]).attr("class").includes('active')) break;
    }
    // si el tab activo actual es diferente al último pulsamos sobre el boton next
    if (i < (tabsLength - 1)) {
      $('.next').filter(function() { return !$(this).attr('class').includes('last') }).click();
    }
  });
});
<link href="http://vinceg.github.io/twitter-bootstrap-wizard/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://vinceg.github.io/twitter-bootstrap-wizard/bootstrap/js/bootstrap.min.js"></script>
<script src="http://vinceg.github.io/twitter-bootstrap-wizard/jquery.bootstrap.wizard.js"></script>
<div id="bar" class="progress" style="margin-top: 20px;">
    <div class="progress-bar progress-bar-success" role="progressbar" aria- 
    valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"> 
    </div>
</div>

<div id="Wizard" class="wizard">
    <ul style="">
        <li><a href="#tab1" data-toggle="tab">Datos Personales</a></li>
        <li><a href="#tab2" data-toggle="tab">Solicitud Matricula</a></li>
        <li><a href="#tab3" data-toggle="tab">Ebook</a></li>
        <li><a href="#tab4" data-toggle="tab">Resumen</a></li>
    </ul>

    <div class="tab-content">
      <div class="tab-pane" id="tab1">
        <h2>¿Cuántas personas trabajan en tu empresa?</h2>  
        <div class="list-group">
            <a href="#" class="list-group-item">a. Sólo yo</a>
            <a href="#" class="list-group-item">b. Entre 2 y 10 personas</a>
            <a href="#" class="list-group-item">c. Más de 10 personas</a>                   
        </div> 
      </div>
      <div class="tab-pane" id="tab2">
        <h2>¿Qué sistema operativo utilizas en tu computador?</h2>
        <div class="list-group wizard">
            <a href="#" class="list-group-item">a. No uso computador</a>
            <a href="#" class="list-group-item">b. No sé / No estoy 
            seguro</a>
            <a href="#" class="list-group-item">c. Windows</a>
            <a href="#" class="list-group-item">d. MacOS</a>
            <a href="#tab3" class="list-group-item">e. Linux</a>
        </div> 
      </div>
      <div class="tab-pane" id="tab3">
        <h2>¿Qué sistema operativo utilizas en tu computador?</h2>
        <div class="list-group wizard">
            <a href="#" class="list-group-item">a. No uso computador</a>
            <a href="#" class="list-group-item">b. No sé / No estoy 
            seguro</a>
            <a href="#" class="list-group-item">c. Windows</a>
            <a href="#" class="list-group-item">d. MacOS</a>
            <a href="#tab3" class="list-group-item">e. Linux</a>
        </div> 
      </div>
      <div class="tab-pane" id="tab4">
        <h2>¿Qué sistema operativo utilizas en tu computador?</h2>
        <div class="list-group wizard">
            <a href="#" class="list-group-item">a. No uso computador</a>
            <a href="#" class="list-group-item">b. No sé / No estoy 
            seguro</a>
            <a href="#" class="list-group-item">c. Windows</a>
            <a href="#" class="list-group-item">d. MacOS</a>
            <a href="#tab3" class="list-group-item">e. Linux</a>
        </div> 
      </div>

    <ul class="pager wizard">
        <li class="previous first" style="display:none;"><a href="#">Primero</a></li>
        <li class="previous"><a href="#">Anterior</a></li>
        <li class="next last" style="display:none;"><a href="#">Ultimo</a></li>
        <li class="next"><a href="#">Siguiente</a></li>
    </ul>

</div>
    
answered by 31.10.2018 / 08:33
source
How to install Font Awesome 5 in Angular 6? use several versions of jquery