1

我正在使用 Bootstrap 导航选项卡来拆分页面（我网站上的帖子。一页显示用户发布的帖子。另一页显示所有帖子。我正在使用 $_GET 变量对页面进行分页。

<ul class="nav nav-tabs" id="myTab">
<li class="active"><a href="#myPosts">My Posts</a></li>
<li><a href="#allPosts">All Posts</a></li>
</ul>

<div class="tab-content">
<div class="tab-pane active" id="myPosts">
<?php include "myPosts.php"; ?></div>
<div class="tab-pane" id="allPosts">
<?php include "allPosts.php"; ?></div>
</div>

我通过包含相关页面链接在每个选项卡上显示内容。

这是应该将用户带到第 2 页的链接之一的示例。

 <a href="mySite.com/posts?page=2">2</a>

这适用于 myPosts，但是当我单击第二个选项卡（所有帖子）并尝试分页时，它会将我带到 myPosts 的第二页。分页都是基于 url 的，所以无论如何要向 url 提供什么选项卡/div 处于活动状态？

4

1 回答 1

0

在您发布的代码中，您有<div class="tab-pane active" id="myPosts"> 所以active该类被硬编码在该 div 中。如果这就是你想要的，那太好了......否则，我认为我们需要在生成列表时执行类似以下未经测试的代码：

<?php
//dummy data
$pages=array(
    array('id'=>'1','posts'=>array('id'=>1,'content'=>'Go Bucks')),
    array('id'=>'2'),//more posts
    array('id'=>'3'),
    );
?>

<ul class="nav">
    <?php foreach($pages as $page): ?>
        <li class="<?= ($page['id']===$_GET['page']) ? ' active':null ?>">
            <a href="posts/page$<?= $page['id'] ?>"></a>Page <?= $page['id'] ?>
        </li>
    <?php endforeach; ?>
</ul>
<div class="tab-content">
    <?php foreach($pages as $page): ?>
        <div class="tab-pane<?php if($page['id']===$_GET['page']){echo ' active in';} ?>">
            //foreach posts here
        </div>
    <?php endforeach; ?>
</div>

我试图演示的想法是测试页面 ID 与 $_GET['page'] 值。

另一个想法：查看 bootstrap 的示例“ http://getbootstrap.com/javascript/#tabs 您可能喜欢在这里使用 javascript，或者至少检查他们的示例以找出您想要的语法和行为。

于 2013-10-22T01:06:42.177 回答