打开 Bootstrap 模态框时，将第一个选项卡设为活动选项卡。

Question

打开 Bootstrap 模态框时，将第一个选项卡设为活动选项卡。

javascriptjqueryhtml

3

我有一个按钮，点击它会显示一个Bootstrap模态框。

模态框包含侧边栏选项卡。

我的问题是，当我关闭模态框并再次点击按钮打开它时，它会打开最后激活的选项卡。

我希望当我关闭模态框并再次打开模态框时，激活的选项卡是第一个选项卡，而不需要重新加载页面。

我的HTML代码：

 // the button that will open the bootstrap modal  
            <div>
            <a href="#"  class="popupLink" data-toggle="modal" data-target="#yDetailsModal"> 
            </a>
            </div>

// bootstrap modal  


<div class="modal" id="MyDetailsModal" tabindex="-1" role="dialog" arialabelledby="myDetailsModal" aria-hidden="true" >

 <div class="modal-dialog modal-details" role="document">

  <div class="modal-content modal-details">

   <div class="modal-header">

 <button type="button" class="close close-button"  data-dismiss="modal" aria-label="Close" id="btnId"> </button>

  </div>


 <div class="modal-body">
  <div class=" tabs-left" id= "modal-tabs">
   <ul class="nav nav-tabs">

   <li class="active"> 
   <a href="#personal"  data-toggle="tab"></a></li>

  <li>
   <a  href="#promotion" data-toggle="tab"> </a> </li> 
    <li>
    <a  href="#vacation" data-toggle="tab"> </a> </li>


</ul>
 </div>



<div class="tab-content" id="tab-content">
 <div class="tab-pane active" id="personalInformation"> 
  <div>
   <ul>
     <li>

      <span> this is a personal information</span>
      </li>
</ul>
</div>
</div>

- Renad

Bootstrap正在使用哪个版本？ - Manu Varghese

我的Bootstrap版本是v3.3.6。 - Renad

5个回答

2

在模型弹出之前调用函数ActiveFirstTab()。

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

  <div>

    <button type="button" onclick="ActiveFirstTab();" class="btn btn-info btn-lg" data-toggle="modal" data-target="#MyDetailsModal">Open Modal</button>
  </div>



  <div class="modal" id="MyDetailsModal" tabindex="-1" role="dialog" arialabelledby="myDetailsModal" aria-hidden="true" >

   <div class="modal-dialog modal-details" role="document">

    <div class="modal-content modal-details">

     <div class="modal-header">

       <button type="button" class="close close-button"  data-dismiss="modal" aria-label="Close" id="btnId"> </button>

     </div>


     <div class="modal-body">
      <div class=" tabs-left" id= "modal-tabs">
       <ul class="nav nav-tabs">

         <li class="active"> 
          <a href="#personal"  data-toggle="tab">One</a></li>

          <li>
           <a  href="#promotion" data-toggle="tab">Two </a> </li> 
           <li>
            <a  href="#vacation" data-toggle="tab">Three </a> </li>


          </ul>
          <div class="tab-content">
  <div id="personal" class="tab-pane fade in active">
    <h3>personal</h3>
    <p>Some content.</p>
  </div>
  <div id="promotion" class="tab-pane fade">
    <h3> promotion Menu 1</h3>
    <p>Some content in menu 1.</p>
  </div>
  <div id="vacation" class="tab-pane fade">
    <h3>vacation Menu 2</h3>
    <p>Some content in menu 2.</p>
  </div>
</div>
        </body>
        <script type="text/javascript">
          function ActiveFirstTab() {
       
   
           $('a[href="#personal"]').tab('show');
           
         }
       </script>

     </script>
     </html>

- Manu Varghese

它可以工作，但一旦标签页打开，内容就无法加载。 - Renad

我担心这个<div class="tab-content" id="tab-content">可能会引起问题，你觉得呢？<div class="tab-pane active" id="personalInformation"> <div> <ul> <li> <span>这是个人信息</span> </li> </ul> </div> - Renad

@RenadMunhi 现在请检查，已经更正了错误。 - Manu Varghese

@RenadMunhi 请现在检查。 - Manu Varghese

2

你能否添加下面提到的jQuery代码呢？希望这能对你有所帮助。

$(".popupLink").click(function(){
    jQuery('.nav-tabs li').removeClass('active');
    jQuery('.nav-tabs li:first-child').addClass('active');
});

- vadivel a

我担心这个 div 引起了问题，你觉得呢？ <div class="tab-content" id="tab-content"> <div class="tab-pane active" id="personalInformation"> <div> <ul> <li> <span> 这是个人信息 </span> </li> </ul> </div> - Renad

1

试一下。（在片段中运行以测试）

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Modal Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div>
    <button type="button" onclick="openModal();" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
</div>
<div class="modal" id="myModal" tabindex="-1" role="dialog" arialabelledby="myModal" aria-hidden="true">
    <div class="modal-dialog modal-details" role="document">
        <div class="modal-content modal-details">
            <div class="modal-header">
                <button type="button" class="close close-button" data-dismiss="modal" aria-label="Close" id="btnId"></button>
            </div>
            <div class="modal-body">
                <div class=" tabs-left" id="modal-tabs">
                    <ul class="nav nav-tabs">
                        <li class="active"><a href="#one" data-toggle="tab">One</a></li>
                        <li><a href="#two" data-toggle="tab">Two</a></li>
                        <li><a href="#three" data-toggle="tab">Three</a></li>
                    </ul>
                    <div class="tab-content">
                        <div id="one" class="tab-pane fade in active">
                            <h3>Menu 1</h3>
                            <p>Some content in menu 1.</p>
                        </div>
                        <div id="two" class="tab-pane fade">
                            <h3>Menu 2</h3>
                            <p>Some content in menu 2.</p>
                        </div>
                        <div id="three" class="tab-pane fade">
                            <h3>Menu 2</h3>
                            <p>Some content in menu 3.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    function openModal() {
        $("#myModal li").first().children()[0].click();
    }
</script>
</html>

- Raj Yadav

0

在页面加载时，设置动态的第一个选项卡为活动状态并打开该选项卡，我正在使用以下代码：

$(document).ready(function(){
   $('.nav-tabs a').removeClass('active');
   $('.nav-tabs a:first-child').addClass('active');
   $('.tab-pane:first-child').addClass('active show');
 });

- Sathish

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- souravmsh · Accepted Answer

只需使用Bootstrap的默认方法modal和tab

$('#MyDetailsModal').on('show.bs.modal', function (event) { 
    $(this).find('.nav a:first').tab('show');
})

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div>
    <a href="#" class="popupLink btn btn-info btn-lg" data-toggle="modal" data-target="#MyDetailsModal">MyDetailsModal
    </a>
</div>

<div class="modal" id="MyDetailsModal" tabindex="-1" role="dialog" arialabelledby="myDetailsModal" aria-hidden="true">
    <div class="modal-dialog modal-details" role="document">
        <div class="modal-content modal-details">
            <div class="modal-header">
                <button type="button" class="close close-button" data-dismiss="modal" aria-label="Close" id="btnId"> </button>
            </div>

            <div class="modal-body">
                <div class=" tabs-left" id="modal-tabs">
                    <ul class="nav nav-tabs">
                        <li class="active">
                            <a href="#personal" data-toggle="tab">personal</a>
                        </li>
                        <li>
                            <a href="#promotion" data-toggle="tab">promotion</a>
                        </li>
                        <li>
                            <a href="#vacation" data-toggle="tab">vacation</a>
                        </li>
                    </ul>
                </div>

                <div class="tab-content" id="tab-content">
                    <div class="tab-pane active" id="personal">
                        this is a personal information
                    </div>
                    <div class="tab-pane" id="promotion">
                        this is a promotion information
                    </div>
                    <div class="tab-pane" id="vacation">
                        this is a vacation information
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>