Jquery 引导模式登录和注册问题：_Jquery_Html_Css_Twitter Bootstrap 3_Bootstrap Modal

Jquery 引导模式登录和注册问题：

jquery html css twitter-bootstrap-3

Jquery 引导模式登录和注册问题：,jquery,html,css,twitter-bootstrap-3,bootstrap-modal,Jquery,Html,Css,Twitter Bootstrap 3,Bootstrap Modal,我正在尝试使用bootstrap modalbox创建由菜单名“Login”和“Sign Up”组成的菜单栏，其中包括使用jquery的两个名为“Login”和“Sign Up”的选项卡。请参考下面给出的示例面临的问题有：当我第一次单击菜单栏中的任何菜单时，modalbox中的两个选项卡下没有显示任何内容。单击任何选项卡后，将显示选项卡的内容。我想在第一次点击时也会显示选项卡的内容。当我点击“登录”菜单时，“登录”选项卡并不总是打开并突出显示。打开先前选择的选项卡，即“登录”或“注册”，以

我正在尝试使用bootstrap modalbox创建由菜单名“Login”和“Sign Up”组成的菜单栏，其中包括使用jquery的两个名为“Login”和“Sign Up”的选项卡。请参考下面给出的示例

面临的问题有：

当我第一次单击菜单栏中的任何菜单时，modalbox中的两个选项卡下没有显示任何内容。单击任何选项卡后，将显示选项卡的内容。我想在第一次点击时也会显示选项卡的内容。当我点击“登录”菜单时，“登录”选项卡并不总是打开并突出显示。打开先前选择的选项卡，即“登录”或“注册”，以先前尝试中选择的为准。“注册”也是如此。我希望当我点击“登录”菜单时，“登录”选项卡应打开并突出显示&当我点击“注册”菜单时，“注册”选项卡应打开。我是一个初学者&第一次在stackoverflow中发布

提前感谢您的支持

jQuerydocument.readyfunction${ $“菜单-右上角li”。单击功能{ $this.addClass'active'。兄弟.removeClass'active' $nav.nav tabs li.eq$this.index.addClassactive.sides.removeClass'active'； $'nav.tab content.tab pane'.eq$this.index.addClass'active'.sides.removeClass'active'； }; }; 切换导航

我想这可能对你有帮助

HTML

只需将此代码添加到现有代码中

假设第一个子元素是login li tab和login div content。如果两个都有一个类名登录，那么可以这样使用它

您应该在主体标记的底部加载jquery和bootstrap.min.js。jquery和bootstrap.min.js已经在主体标记的底部加载。

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');
    });
});

<!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>

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

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