表单提交后保持相同的Bootstrap选项卡

Question

I have some tabs created using Bootstrap 4 as given in sample snippet:

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" id="pills-home-tab" data-toggle="pill" 
            href="#pills-home" role="tab" aria-controls="pills-home" aria- 
            selected="true">Home</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="pills-profile-tab" data-toggle="pill" 
            href="#pills-profile" role="tab" aria-controls="pills-profile" aria- 
            selected="false">Profile</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="pills-contact-tab" data-toggle="pill" 
        href="#pills-contact" role="tab" aria-controls="pills-contact" aria- 
        selected="false">Contact</a>
    </li>
</ul>
<div class="tab-content" id="pills-tabContent">
    <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria- 
        labelledby="pills-home-tab">...</div>
    <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria- 
        labelledby="pills-profile-tab">...</div>
    <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria- 
        labelledby="pills-contact-tab">...</div>
</div>

In one of the tabs, I have a form to be submitted using PHP. However, After the form submission, I am unable to stay in the same tab. How to solve this?

Answer 1

It is advised that you send form data via AJAX.

But, coming back to your problem.

If you are submitting the form via PHP, url will change.

Add to your form's action:

<form action="your-php-file.php?tab=pills-contact" method="post">

Now, after form submit, get $_GET['tab']

$homeTabActive = ! empty($_GET['tab']) && $_GET['tab'] == 'pills-home' ? $_GET['tab'] : 'pills-home'

In your tabs, set active to the respective tab.

Like this:

<div class="tab-content" id="pills-tabContent">
    <div class="tab-pane fade show <?php echo $homeTabActive;?>" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">...</div>

Do the same for all tabs.