jQuery分页+ Twitter Bootstrap [英] jQuery pagination + Twitter Bootstrap

问题描述

我正在尝试修改Jquery分页（基于这个Jquery分页教程 - 演示）与令人敬畏的Twitter bootstrap一起工作。

I'm trying to modify a Jquery pagination (based on this Jquery pagination tutorial - demo) to work with the awesome twitter bootstrap.

Twitter Bootstrap的标准分页设置如下所示，因此这是分页输出结构的目标。

Twitter Bootstrap's standard pagination setup looks like this, so this is the goal for the pagination output structure.

<div class="pagination">
    <ul>
        <li class="prev disabled"><a href="#">&larr; Previous</a></li>
        <li class="active"><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li class="next"><a href="#">Next &rarr;</a></li>
    </ul>
</div>

到目前为止，我可以通过更改html输出结构来实现它，但活动突出显示不起作用因为我将< a> 的输出更改为< li> 标记。

So far I can get it to work by changing the html output structure but the active highlighting is not working proper since I changed the output from <a> to the <li> tag.

这就是我现在被困在ATM的地方！

• 禁用 prev 按钮，在第一页时


• 更改活动< li> 更改页面时


• 在最后一页上禁用下一步按钮


• 修复 prev 按钮，以便它再次起作用


• 修复下一个按钮，使其再次起作用

• Disable prev button, when on first page
• Change Active <li> when page is changed
• Disable next button when on last page
• Fix the prev button so it works again
• fix the next button so it works again

下面是 JsFiddle 的链接 - 某种程度上它不起作用，但代码应该是正确的（与此相同的代码）

Heres the link to the JsFiddle - somehow it's not working, but the code should be correct (same code as this)

推荐答案

我完全忘记了这个帖子

但是我设法使用以下代码：

I totally forgot this post
However i managed to make it work with the following code:

// Based on http://stackoverflow.com/questions/1262919/jquery-active-class-assignment and http://stackoverflow.com/questions/2037501/javascript-add-class-when-link-is-clicked

$(function() {
    $('ul.nav li:first').addClass('active').show(); //Activate first tab
    $('li a').click(function(e) {
        //e.preventDefault();
        var $this = $(this);
        $this.closest('ul').children('li').removeClass('active');
        $this.parent().addClass('active');

        //Remove active from dropdown li
        $('.dropdown').removeClass('active');

        // Activate Home when clicked on the logo
        $('.thelogo').click(function()
            {
              $('.nav li').removeClass('active');
              $('.home').addClass('active');
            });
    });
});

这篇关于jQuery分页+ Twitter Bootstrap的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！