«Bootstrap fichas para moverse entre las fichas a través de los botones Prev/next.»

Tengo una función en javascript que me deje ir a la pestaña siguiente:

$(".btn-style").click
(
    function()
    {
        $('.nav-tabs li:eq(1) a').tab('show');

        $("[class='btn btn-large btn-block btn-success disabled']").removeClass("btn btn-large btn-block btn-success disabled");
        $('.nav-tabs li:eq(1) a').addClass("btn btn-large btn-block btn-success disabled");
    }
);

mi html:

                        <ul class="nav nav-tabs" style="width: 1050px">
                                <li><a href="#Race" class="btn btn-large btn-block btn-success disabled" data-toggle="tab">Race</a></li>
                                <li><a href="#Ace" data-toggle="tab">Ace</a></li>
                                <li><a href="#Deep" data-toggle="tab">Deep</a></li>

                        </ul>


                                <div class="tab-content">


                                        <!-- Race -->
                                        <div class="tab-pane active" id="Race">
                                                     <button class="btn-style" type="submit">Prev</button>
                                                     <button class="btn-style" type="submit">Next</button>

                                         </div>

                                        <!-- ACE -->
                                        <div class="tab-pane active" id="Ace">
                                                     <button class="btn-style" type="submit">Prev</button>
                                                     <button class="btn-style" type="submit">Next</button>

                                        </div>


                                </div>

Necesito un javascript o jquery función a través de la cual puedo ir a través de todos mis pestañas una por una haciendo clic de un botón en sus respectivas pestañas. Se agradece cualquier ayuda gracias.

  • Usted puede agregar un atributo personalizado a todos sus elementos de ficha decir atributo personalizado con el Nombre de tabIdentifier = «ficha» + algunos enumerador. así que usted puede tener un genérico método javascript que será despedido en el clic de un botón, que va a recuperar el botón de la ficha ajuste decir div leer este atributo personalizado y, a continuación, basado en el enumerador puede establecer que la anterior o a la siguiente pestaña activa restando o sumando el enumerador uno y seleccionando dicha ficha.
InformationsquelleAutor | 2014-01-23

4 Comentarios

  1. 2

    Llamar a esta función común en los botones Siguiente y anterior en Click evento

    $('#nxt').on('click', function () {
       moveTab("Next");
    });
    $('#prv').on('click', function () {
       moveTab("Previous");
    });
    
    
    function moveTab(nextOrPrev) {
       alert(nextOrPrev);
       var currentTab = "";
       $('.nav-tabs li').each(function () {
          if ($(this).hasClass('active')) {
            currentTab = $(this);
          }
       });
    
       if (nextOrPrev == "Next") {
          if (currentTab.next().length) 
          {
             currentTab.removeClass('active');
             currentTab.next().addClass('active');}
          else {} //do nothing for now
    
        } else {
          if (currentTab.prev().length) 
          {
            currentTab.removeClass('active');
            currentTab.prev().addClass('active');
          }
          else {} //do nothing for now 
        }
      }

    LA DEMOSTRACIÓN EN VIVO DE @ http://jsfiddle.net/R3mCY/50/

    Nota:he quitado los eventos click de devolución de llamada de agregado para la siguiente y anterior botón de html, en lugar adjunta una función de devolución de llamada para el evento click de los botones en Jquery sí

    Feliz De Codificación 🙂

    • unsderstood por esto no funciona :/
    • no fueron pocos sintaxis en el código,he corregido ahora.
    • voy a probar ahora y te lo diré.
    • jsfiddle.net/R3mCY/4 favor de hacer este trabajo por su función.
    • he corregido los problemas de verificación de mi respuesta
    • thankyouuu mucho ur el mejor <3
    • jsfiddle.net/R3mCY/56 u puede modificarse esta @dreamweiver. sólo por encima de las pestañas están cambiando, pero no el contenido. var i = 1; $(‘.nav-tabs li:eq(i) a’).ficha(‘ver’); i++; // he intentado esto pero no su trabajo
    • Ya que no hay problemas, va a dejar u saber una vez que se fija.
    • Gracias, había que añadir esto, pero pensaba que iba a google antes de la mano, así que me ahorro la molestia:)
    • Mejor, gracias

  2. 1

    Me gustaría abordar es como este:

    HTML:

    <ul class="nav nav-tabs" style="width: 1050px">
        <li class="active"><a href="#Race" data-toggle="tab">Race</a>
        </li>
        <li><a href="#Ace" data-toggle="tab">Ace</a>
        </li>
        <li><a href="#Deep" data-toggle="tab">Deep</a>
        </li>
    </ul>
    <div class="tab-content">
        <!-- Race -->
        <div class="tab-pane active" id="Race">
            <button class="btn-style" type="submit">Prev</button>
            <button class="btn-style" type="submit">Next</button>
        </div>
        <!-- ACE -->
        <div class="tab-pane" id="Ace">
            <button class="btn-style" type="submit">Prev</button>
            <button class="btn-style" type="submit">Next</button>
        </div>
    </div>

    Y JS:

    $(".btn-style").click(function () {
        var target = $(".nav-tabs li.active");
        var sibbling;
        if ($(this).text() === "Next") {
            sibbling = target.next();
        } else {
            sibbling = target.prev();
        }
        if (sibbling.is("li")) {
            sibbling.children("a").tab("show");
        }
    });

    Me agarró de la normal estilo de http://getbootstrap.com/javascript/#tabs porque yo no tenía ganas de trabajar con todas las clases de botón.

    • esto también no funciona :/
    • a mí me funciona, consulte este violín: jsfiddle.net/RRWyf. Tal vez me has malinterpretado algo?
    • sí, gracias a su trabajo. pero tengo el mismo problema, sólo por encima de las pestañas están cambiando, pero no el contenido.
    • Mi mal, mirando la referencia que en realidad no debería quitar / añadir la clase activa a sí mismo. Actualizado el violín: jsfiddle.net/RRWyf/1
    • simplemente perfecto. gracias. el único problema que tengo ahora es cómo cambiar la clase de la que es en mi caso «btn btn-large btn-bloquear btn-el éxito de movilidad» he intentado esto $(«[class=’btn btn-large btn-bloquear btn-éxito de la movilidad’]»).removeClass(«btn btn-large btn-bloquear btn-el éxito de movilidad»); $(this).sibbling(«li»).addClass(«btn btn-large btn-bloquear btn-el éxito de movilidad»); la primera línea de quitar el css de la ficha anterior pero sencond línea didnot agregar el css en la siguiente ficha.
    • he encontrado por mí mismo. gracias

  3. 0

    //Esta es la solución final (Gracias a: gpgekko y dreamweiver)

    <!-- Move to other tabs by clicking on the button -->
    <script>
    $(".a-btn-text").click(function ()
      { 
        var target = $(".nav-tabs li.active");
        var sibbling;
    
        if ($(this).text() === "Next")
        {
            sibbling = target.next();
        }
    
        else
        {
            sibbling = target.prev();
        }
    
        if (sibbling.is("li"))
        {
            sibbling.children("a").tab("show");
            $("[class='btn btn-large btn-block btn-success disabled']").removeClass("btn btn-large btn-block btn-success disabled");
            sibbling.children("a").addClass("btn btn-large btn-block btn-success disabled");
        }
    });
    </script>
  4. 0

    Esto es lo que usted desea.

    JS

    $('.continue').click(function(){
      $('.nav-tabs > .active').next('li').find('a').trigger('click');
    });
    $('.back').click(function(){
      $('.nav-tabs > .active').prev('li').find('a').trigger('click');
    });

    CSS

    .tabs-wrap {
        margin-top: 40px;
    }
    .tab-content .tab-pane {
        padding: 20px 0;
    }

    Finalmente HTML

    De http://www.bootply.com/fGvD5eB3Ms

Dejar respuesta

Please enter your comment!
Please enter your name here