Question

我有一些使用Bootstrap 4创建的选项卡，如示例代码所示：

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

在其中一个选项卡中，我有一个要使用PHP提交的表单。但是，提交表单后，我无法停留在同一选项卡中。该如何解决？

Answer 1

使用url（GET）或POST传递一些特定于选项卡的参数，检索并显示您想要的任何内容。

例如：假设：对于tab1：tabid = 1，对于tab2：tabid = 2和tab3：tabid = 3。

<?php if (isset($_GET['tabid)) $tabid=$_GET['tabid']; else $tabid=0;
?>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade <?php if($tabid==1) echo 'show active';?>" id="pills-home" role="tabpanel" aria- 
labelledby="pills-home-tab">...</div>
<div class="tab-pane fade <?php if($tabid==1) echo 'show active';?>" id="pills-profile" role="tabpanel" aria- 
labelledby="pills-profile-tab">...</div>
<div class="tab-pane fade <?php if($tabid==1) echo 'show active';?>" id="pills-contact" role="tabpanel" aria- 
labelledby="pills-contact-tab">...</div>
</div>

在提交时，假设您具有不同的表单，则可以使用隐藏的输入类型来发送参数以标识哪个选项卡的表单已提交。

Answer 2

一种方法是：提交表单后重新加载页面时，您需要将Tab ID作为查询参数发送。

将类active添加到相应的标签。

会是这样

URL：website.com?tabid=pills-home

<?php 
$tabId = isset($_GET['tabid']) ?$_GET['tabid'] : "";
?>

<div class="tab-pane fade show <?php if($tabId=="pills-home") echo("active"); ?>" id="pills-home" role="tabpanel" aria- 
labelledby="pills-home-tab">...</div>

Answer 3

建议您通过AJAX发送表单数据。

但是，回到您的问题上。

如果您是通过PHP提交表单，则网址将会更改。

添加到表单的操作中：

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

现在，提交表单后，获得$_GET['tab']

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

在您的标签中，将active设置为相应的标签。

赞：

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

对所有标签执行相同操作。

提交表单后停留在相同的Bootstrap选项卡上

3 个答案: