Bootstrap Modal Login & Registration Issue:

Question

Я пытаюсь создать меню, состоящее из имен меню «Вход» & «Зарегистрироваться», используя загрузочный modalbox, который состоит из 2 вкладок с именем «Login» & «Зарегистрироваться» с помощью jquery. См. Пример, приведенный ниже.

Проблемы, с которыми сталкиваются являются:

1. Когда я первый нажать на любую из меню в строке меню, ничего не показано на modalbox под 2 вкладок. После нажатия на любую вкладку отображается содержимое вкладки. Я хочу, чтобы при первом щелчке отображалось содержимое вкладок.
2. Когда я нажимаю на меню «Логин», это не так, как всегда на вкладке «Вход» открывается & выделение. Ранее выбранная вкладка открывается, т. Е. Либо «Войти», либо «Зарегистрироваться» в зависимости от того, что было выбрано в предыдущей попытке. То же самое происходит с «Sign Up». Я хочу, чтобы, когда я нажимаю на меню «Войти», вкладка «Вход» должна открывать & выделить &, когда я нажимаю «Меню», открывается вкладка «Зарегистрироваться».

Я начинающий & Публикация впервые в stackoverflow.

Заранее благодарим за вашу поддержку!

jQuery(document).ready(function($) { 
 
\t $('#menu-top-right li').click(function(){ 
 
\t \t $(this).addClass('active').siblings().removeClass('active') 
 
\t \t $("nav .nav-tabs li").eq($(this).index()).addClass("active").siblings().removeClass('active'); \t \t \t \t \t 
 
\t \t $('nav .tab-content .tab-pane').eq($(this).index()).addClass('active').siblings().removeClass('active'); 
 
\t }); 
 
});

<link href="http://getbootstrap.com/dist/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://getbootstrap.com/dist/js/bootstrap.min.js"></script> 
 
<nav class="navbar navbar-inverse navbar-fixed-top"> 
 
     <div class="container"> 
 
     <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
 
      <span class="sr-only">Toggle navigation</span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      </button> 
 
      
 
     </div> 
 
     <div id="navbar" class="collapse navbar-collapse"> 
 
      
 
      
 
      <ul id="menu-top-right" class="nav navbar-nav navbar-right"> 
 
      <li><a href="" data-toggle="modal" data-target="#myModal">Login</a></li> 
 
      <li><a href="" data-toggle="modal" data-target="#myModal">Sign Up</a></li> 
 
     </ul> 
 
     </div><!--/.nav-collapse --> 
 
     </div> 
 
    </nav> 
 
    
 
    
 
    <!-- Modal --> 
 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
 
    <div class="modal-dialog"> 
 
    <div class="modal-content"> 
 
     <div class="row no-padding"> 
 
     <div class="col-md-12"> 
 
      <div role="tabpanel"> 
 
      
 
      <!-- Nav tabs --> 
 
      <ul class="nav nav-tabs" role="tablist" id="myTab"> 
 
       <li role="presentation" class="active"><a href="#login" aria-controls="login" role="tab" data-toggle="tab">Login</a></li> 
 
       <li role="presentation"><a href="#signup" aria-controls="signup" role="tab" data-toggle="tab">Sign Up</a></li> 
 
      </ul> 
 
      
 
      <!-- Tab panes --> 
 
      <div class="tab-content" > 
 
       <div role="tabpanel" class="tab-pane" id="login"> 
 
       
 
       <div style="min-height: 150px; background: red;"></div> 
 
       
 
       </div> 
 
       <div role="tabpanel" class="tab-pane" id="signup"> 
 
       <div style="min-height: 150px; background: blue;"></div> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
    
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

jQuery(document).ready(function($) { 
    $('#menu-top-right li').click(function(){ 
     $(this).addClass('active').siblings().removeClass('active') 
     $(".nav-tabs li").eq($(this).index()).addClass("active").siblings().removeClass('active');     
     $('.tab-content .tab-pane').eq($(this).index()).addClass('active').siblings().removeClass('active'); 
    }); 
}); 

Answer 2

Я думаю, что это может помочь вам ..

HTML

<!DOCTYPE html> 
<html lang="en"> 

    <head> 
    <meta charset="utf-8" /> 
    <title>Bootstrap, from Twitter</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <meta name="description" content="" /> 
    <meta name="author" content="" /> 


    <!-- Le styles --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" /> 
    <link href="style.css" rel="stylesheet" /> 

    </head> 

    <body> 
<nav class="navbar navbar-inverse navbar-fixed-top"> 
     <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 

     </div> 
     <div id="navbar" class="collapse navbar-collapse"> 


      <ul id="menu-top-right" class="nav navbar-nav navbar-right"> 
      <li><a href="" data-toggle="modal" data-target="#myModal">Login</a></li> 
      <li><a href="" data-toggle="modal" data-target="#myModal">Sign Up</a></li> 
     </ul> 
     </div><!--/.nav-collapse --> 
     </div> 
    </nav> 


    <!-- Modal --> 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="row no-padding"> 
     <div class="col-md-12"> 
      <div role="tabpanel"> 

      <!-- Nav tabs --> 
      <ul class="nav nav-tabs" role="tablist" id="myTab"> 
       <li role="presentation" class="active"><a href="#login" aria-controls="login" role="tab" data-toggle="tab">Login</a></li> 
       <li role="presentation"><a href="#signup" aria-controls="signup" role="tab" data-toggle="tab">Sign Up</a></li> 
      </ul> 

      <!-- Tab panes --> 
      <div class="tab-content" > 
       <div role="tabpanel" class="tab-pane" id="login"> 

       <div style="min-height: 150px; background: red;">text</div> 

       </div> 
       <div role="tabpanel" class="tab-pane" id="signup"> 
       <div style="min-height: 150px; background: blue;"></div> 
       </div> 
      </div> 
      </div> 
     </div> 

     </div> 
    </div> 
    </div> 
</div> 




    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
    <script> 
     jQuery(document).ready(function($) { 
     $('#menu-top-right li').click(function(){ 
      $(this).addClass('active').siblings().removeClass('active') 
      $(".nav-tabs li").eq($(this).index()).addClass("active").siblings().removeClass('active');     
      $('.tab-content .tab-pane').eq($(this).index()).addClass('active').siblings().removeClass('active'); 
     }); 
    }); 
    </script> 
    </body> 

</html> 

Answer 3

Просто добавьте этот код к вам существующий код ..

JS

$("#myModal").on('shown.bs.modal', function() { 
    $('#myTab').parent().find('.active').removeClass('active'); 
    $(this).find('li:first-child,.tab-pane:first-child').addClass('active') 
}) 

предположение, что first-child элемент login li tab и login div content.
Если у вас есть имя класса login для них обоих, то вы можете использовать его как этот

JS

$("#myModal").on('shown.bs.modal', function() { 
    $('#myTab').parent().find('.active').removeClass('active'); 
    $(this).find('.login').addClass('active') 
})