php分页Bootstrap导航选项卡问题 [英] Php Pagination Bootstrap Nav Tabs Issue

问题描述

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

I am using the Bootstrap navigation tabs to split a page (posts on my site. One page shows the posts which the user has made. The other page shows all posts. I am using $_GET variables to paginate the pages.

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

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

I am displaying the content on each tab by including the relevant page link.

以下是其中一个链接的示例，该链接应将用户带到第2页.

Here is an example of one of the links which should take the user to page 2.

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

这对于myPosts可以正常工作，但是当我单击第二个选项卡(所有帖子)并尝试进行分页时，它将带我到myPosts的第二页.分页都是基于url的，所以反正有什么要输入到url中的哪个tab/div是活动的?

This works fine for myPosts, but when I click on the second tab( all posts) and attempt to paginate, it takes me to the second page of myPosts. The pagination is all url based, so is there anyway to feed into the url what tab/div is active?

推荐答案

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

In the code you posted, you have <div class="tab-pane active" id="myPosts"> So the active class is hard coded in that div. If that's what you want, great... otherwise, I think we need to do something like this untested code when we generate the list:

<?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']值.

The idea I'm trying to demonstrate is to test the page ID vs the $_GET['page'] value.

为您提供的另一个想法:请查看引导程序的示例" http://getbootstrap.com/javascript/#tabs 您可能会喜欢在这里使用javascript，或者至少检查它们的示例来确定所需的语法和行为.

Another idea for you: check out bootstrap's example" http://getbootstrap.com/javascript/#tabs You may enjoy using javascript here, or at least to inspect their example to work out the syntax and behavior you want.

这篇关于php分页Bootstrap导航选项卡问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！