如何在动态生成的引导分页中更改活动按钮？答案

【问题标题】：How to change active buttons in a dynamically generated bootstrap pagination?如何在动态生成的引导分页中更改活动按钮？
【发布时间】：2015-06-15 21:25:35
【问题描述】：

我有一个测验系统，您可以在其中在不同的页面上提问。第 1 页显示一棵树的图片，第 2 页显示其他内容……用户可以为特定页面写问题。

现在我尝试实现一个简单的分页（我已经看过 play-computer-base 示例的示例，但我认为我不需要它），但无法更改页面。

这是目前的分页：

当用户点击2 时，它应该切换到它。

因此我实现了一个导航元素：

<nav>
    <ul class="pagination">
        @for(index <- 1 to 10){
            <li class="@("active".when(index == currentPage))"><a href="@routes.Application.index()">@index <span class="sr-only">(current)</span></a></li>
        }
    </ul>
</nav>

问题出在"active".when(index == currentPage) 部分，目前不正确。由于这是一个 scala 模板，有没有办法改变当前按钮的活动状态？

【问题讨论】：

标签： twitter-bootstrap playframework pagination

【解决方案1】：

只需在for 循环中为 currentPage 尝试一个if 条件。这应该可行。

<nav>
    <ul class="pagination">
        @for(page <- 1 to 10){
            <!-- Assuming you know the value of variable currentPage -->
            @if(page == currentPage) {
                <!-- Current page -->
                <li class="active"><a href="#">@{page}<span class="sr-only">(current)</span></a></li>
            } else {
                <!-- Anchor tag to that page -->
                <li><a href="route_to_that_page_number">@{page}</a></li>
            }
        }
    </ul>
</nav>

【讨论】：