Question

-2

make the first tab the active tab when open a bootstrap modal

rated 0 times [ 3] [ 5] / answers: 1 / hits: 5903 / 4 Years ago, sun, february 16, 2020, 12:00:00

i have a button that will show a bootstrap modal when clicks on it
the modal contains sidebar tabs.

my problem is when i close the modal and open it again by clicking on the button it will open with the last activated tab
i want the activated tab to be the first tab once i close the modal and open the modal again without reloading the page.

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

ravenl

Add To Favorites

Follow

Total Points: 338

Total Questions: 107

Total Answers: 112

Location: Belize

Member since Mon, Jun 20, 2022

2 Years ago

ravenl questions

1 TypeError: e.preventDefault is not a function on React Hook Form using EmailJs

Wed, Sep 1, 21, 00:00, 3 Years ago

1 Vue @change event not working in < b-form-datepicker/>

Thu, Feb 18, 21, 00:00, 3 Years ago

1 Image type in typescript

Tue, Jan 12, 21, 00:00, 3 Years ago

1 How can I append HTML code using JavaScript?

Tue, Mar 17, 20, 00:00, 4 Years ago

1 How to make Formik return a boolean?

Tue, Dec 3, 19, 00:00, 5 Years ago

View All

answered 4 Years ago jackeline · Accepted Answer

Calling a function ActiveFirstTab() before the model pop up

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