Soy nuevo en jquery y bootstrap,así que por favor considere la posibilidad de mis errores.He creado un modal de bootstrap para el inicio de sesión y registro. Contiene dos nav-tabs llamado como inicio de sesión y registro.Tengo dos botones que emergente de la misma ventana Modal, pero mostrar una pestaña dentro de la ventana Modal. En cada pestaña es un formulario con un número de entradas. Mi problema es conseguir que el modal que apareció con ficha inicio de sesión abierta en el modal cuando hago clic en ‘login’ botón y la ficha de inscripción se abre cuando hago clic en el botón ‘registrarse’ en mi página.

Estos son 2 enlaces en los que el modal que se abre:

<div class="header-login-li" style="background-color:gray;float:left;width:100px;height:60px;">
<a data-toggle="modal" href="#regestration" class="header-register-a" >
<big>
<font color="white" class="header-register-font"><center style="margin-top:20px;">Login <i class="icon-chevron-down" style="font-size:20px"></i></center></font>
</big></a></div>

<div class="header-register-li" style="background-color:green;float:right;margin-right:-15px;width:130px;height:60px;">
<a data-toggle="modal" href="#regestration" class="header-register-a" >
<big>
<font color="white" class="header-register-font"><center style="margin-top:20px;">Register</center></font>
</big></a>

Aquí está mi código de pestañas, y su contenido(que estoy evitando código innecesario aquí):

 <div class="tabbable" >
      <ul class="nav nav-tabs" ><!--tabs-->
        <li class="active" style="position:absolute;margin-left:0px;" id="logintab">
        <a href="#pane_login" data-toggle="tab">Login</a></li>
        <li style="margin-left:70px;" id="reg_tab" ><a href="#pane_reg" data-toggle="tab">Registration</a></li>

      </ul>
      <div class="tab-content"><!--login tab content-->
         <div id="pane_login" class="tab-pane active">
             <form id="login-form" target="login-signup-iframe" method="post" action="#" name="login-form">

              </form>

        </div><!--/pane_login-->

        <div id="pane_reg" class="tab-pane"><!--registration tab content-->
           <form id="regestration-form" target="login-signup-iframe" method="post" action="#" name="regestration-form">

            </form>
         </div>
        </div><!-- /.tab-content -->
</div><!-- /.tabbable -->

Creo que esto se puede hacer a través de jquery fácilmente.Pero no sé exactamente cómo hacerlo.
Así que,por favor, alguien me puede ayudar a solucionar mi problema.Gracias de antemano ?

InformationsquelleAutor sachin_ware | 2013-10-25

8 Comentarios

  1. 132

    La aplicación de un selector de la .nav-tabs parece estar funcionando

    HTML es

    <ul class="nav nav-tabs">
        <li><a href="#aaa" data-toggle="tab">AAA</a></li>
        <li><a href="#bbb" data-toggle="tab">BBB</a></li>
        <li><a href="#ccc" data-toggle="tab">CCC</a></li>
    </ul>
    <div class="tab-content" id="tabs">
        <div class="tab-pane" id="aaa">...Content...</div>
        <div class="tab-pane" id="bbb">...Content...</div>
        <div class="tab-pane" id="ccc">...Content...</div>
    </div>

    Script es

    $(document).ready(function(){
      activaTab('aaa');
    });
    
    function activaTab(tab){
      $('.nav-tabs a[href="#' + tab + '"]').tab('show');
    };

    http://jsfiddle.net/pThn6/80/

    • La ficha panel id es innecesario y la modificación de la href se siente extraño para mí. Un limpiador solución sería agregar un id a cada ficha: entonces usted puede cambiar el selector de largo a algo tan simple como $('#' + tab).tab('show');
    • Si se quita la pestaña de panel de id, cómo es cada nav-tabs de anclaje vinculados a su ficha panel?
    • Para resumir lo que está pasando aquí: .tab('show') es que se llama en la <a> de la nav-tabs <li>
    • Traté de que la solución, pero no está funcionando para mí. Estoy usando nav-pastillas en lugar de nav-tabs. Aquí es lo que traté de jsfiddle.net/Lumyc4gs/1 por favor alguien Puede ayudarme a hacer el trabajo? Estoy usando angularJs en mi aplicación, por lo que puede ser, incluso, la solución más sencilla?
    • No importa, tengo que trabajar por la combinación de un par de soluciones de este hilo jsfiddle.net/Lumyc4gs/2
  2. 11

    HTML:

    <a href="PageName.php#tabID">link to other page tab</a>

    Javascript:

    window.onload = function(){  
    
        var url = document.location.toString();
        if (url.match('#')) {
            $('.nav-tabs a[href="#' + url.split('#')[1] + '"]').tab('show');
        }
    
        //Change hash for page-reload
        $('.nav-tabs a[href="#' + url.split('#')[1] + '"]').on('shown', function (e) {
            window.location.hash = e.target.hash;
        }); 
    } 
    • el id debe ser entre comillas : $('.nav-tabs a[href="#' + url.split('#')[1] + '"]').tab('show');
    • lo que está mal con location.hash para también leer el hash en el primer lugar?
  3. 8

    Puede acceder a través de la ficha de Identificación, Pero que id es único para la misma página.
    Aquí es un ejemplo para el mismo

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

    En el ejemplo anterior #product_details es nav tab id

    • Usted salvó mi tiempo, gracias
    • O, si usted está utilizando HREF $('.nav-tabs a[href="#home"]').tab('show')
  4. 3

    Hola Intentar esta gente!

    JS:

    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
                   //save current clicked tab in local storage
                    localStorage.setItem('lastActiveTab', $(this).attr('href'));
                });
                //get last active tab from local storage
                var lastTab = localStorage.getItem('lastActiveTab');
    alert(lastTab +"tab was last active")
                if (lastTab) {
                    $('[href="' + lastTab + '"]').tab('show');
                }

    HTML:

    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    
    <div class="container">
     <div>
    
      <!-- Nav tabs -->
      <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
        <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
        <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
        <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
      </ul>
    
      <!-- Tab panes -->
      <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="home">...</div>
        <div role="tabpanel" class="tab-pane" id="profile">...</div>
        <div role="tabpanel" class="tab-pane" id="messages">...</div>
        <div role="tabpanel" class="tab-pane" id="settings">...</div>
      </div>
    
    </div>
    </div>

  5. 3

    Gracias por la respuesta anterior , aquí está mi código jQuery que está trabajando ahora:

          $(".header-login-li").click(function(){
            activaTab('pane_login');                
          });
    
          $(".header-register-li").click(function(){
            activaTab('pane_reg');
            $("#reg_log_modal_header_text").css()
          });
    
          function activaTab(tab){
            $('.nav-tabs a[href="#' + tab + '"]').tab('show');
          };
  6. 1
        function updateURL(url_params) {
            if (history.pushState) {
            var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?' + url_params;
            window.history.replaceState({path:newurl},'',newurl);
            }
        }
    
        function setActiveTab(tab) {
            $('.nav-tabs li').removeClass('active');
            $('.tab-content .tab-pane').removeClass('active');
    
            $('a[href="#tab-' + tab + '"]').closest('li').addClass('active');
            $('#tab-' + tab).addClass('active');
        }
    
        //Set active tab
        $url_params = new URLSearchParams(window.location.search);
    
    
        //Get active tab and remember it
        $('a[data-toggle="tab"]')
            .on('click', function() {
            $href = $(this).attr('href')
            $active_tab = $href.replace('#tab-', '');
    
            $url_params.set('tab', $active_tab);
            updateURL($url_params.toString());
        });
    
        if ($url_params.has('tab')) {
            $tab = $url_params.get('tab');
            $tab = '#tab-' + $tab;
            $myTab = JSON.stringify($tab);
            $thisTab = $('.nav-tabs a[href=' + $myTab  +']');
            $('.nav-tabs a[href=' + $myTab  +']').tab('show');
        }
  7. 0

    Puedo sugerir un php+css solución que se usa en mi sitio?
    Es muy sencillo y no js problemas 🙂

    url de la página: <a href="page.php?tab=menu1">link to menu1</a>

    <?
    $tab = $_GET['tab'];
    ?>
    <ul class="nav nav-tabs">
    <li class="<? if ($tab=='menu1' OR $tab=='menu2') 
    {
    echo "";
    } 
    else {
    echo "active";
    }
    ?>"><a data-toggle="tab" href="#home">Prodotti</a></li>
    <li class="<? if ($tab=='menu1') 
    {
    echo "active";
    } 
    ?>"><a data-toggle="tab" href="#menu1">News</a></li>
    <li class="<? if ($tab=='menu2') 
    {
    echo "active";
    } 
    ?>"><a data-toggle="tab" href="#menu2">Gallery</a></li>
    </ul>
    <div class="tab-content">
    <div id="home" class="tab-pane fade <? if ($tab=='menu1' OR $tab=='menu2') 
    {
    echo "";
    } 
    else {
    echo "in active";
    }
    ?>
    ">
    <h3>Prodotti</h3>
    <p>Contenuto della pagina, zona prodotti</p>
    </div>
    <div id="menu1" class="tab-pane fade <? if ($tab=='menu1') 
    {
    echo "in active";
    } 
    ?>">
    <h3>News</h3>
    <p>Qui ci saranno le news.</p>
    </div>
    <div id="menu2" class="tab-pane fade <? if ($tab=='menu2') 
    {
    echo "in active";
    } 
    ?>">
    <h3>Gallery</h3>
    <p>Qui ci sarà la gallery</p>
    </div>
    </div>
    • Usted puede definitivamente no sugieren esto. Esta es una muy mala manera de hacer lo que él/ella ha pedido.
  8. -1

    No estoy seguro si he entendido correctamente, pero aquí es el fragmento de código que utilizo para abrir vínculos de Bootstrap ficha menú:

    HTML

    <ul class="nav nav-tabs">
    <li class="active"><a href="#foo" data-toggle="tab">Foo</a></li>
    <li><a href="#bar" data-toggle="tab">Bar</a></li>
    <li><a href="baz.html" class="external">Baz</a></li>
    </ul>
    <div class="tab-content">
    <div class="tab-pane active" id="foo">Foo</div>
    <div class="tab-pane" id="bar">Bar</div>
    </div>

    Javascript

    $('.nav a:not(".external")').click(function (e) {
    e.preventDefault()
    $(this).tab('show')
    })

Dejar respuesta

Please enter your comment!
Please enter your name here