在引导分页器中设置活动页面（分页）答案

【问题标题】：Set active page in bootstrap pager (pagination)在引导分页器中设置活动页面（分页）
【发布时间】：2015-01-27 17:46:06
【问题描述】：

我正在使用引导寻呼机进行分页。出于某种原因，我将寻呼机置于分页功能之上。当我将<ul class="pager"> 放入分页类时。它不起作用，反而弄得一团糟。我删除了分页，寻呼机工作正常。我正在动态生成我的链接，如下所示。

<ul class="pager">
     <li class="previous disabled"><a href="#">&larr; Previous</a></li>
       <li class="disabled"><span>&laquo;</span></li>
       <li>@Html.PageLinks(Model.PagingInfo, x => Url.Action("List", new {page = x}))</li>
     <li><a href="#">&raquo;</a></li>
    <li class="next"><a href="#"> Next &rarr;</a></li>
</ul>

我的PageLinks 是下面的 html 助手。

public static MvcHtmlString PageLinks(this HtmlHelper html,
                                              PagingInfo pagingInfo,
                                              Func<int, string> pageUrl)
        {
            StringBuilder result = new StringBuilder();
            for (int i = 1; i < pagingInfo.TotalPages; i++)
            {
                TagBuilder tag = new TagBuilder("a"); //Construct an <a> tag
                tag.MergeAttribute("href", pageUrl(i));
                tag.InnerHtml = i.ToString();
                if (i == pagingInfo.CurrentPage)
                    tag.AddCssClass("active");

                result.Append(tag.ToString());

            }

            return MvcHtmlString.Create(result.ToString());

        }

我的问题是我想将活动选择属性设置为从 htmlhelper 方法返回。我想在活动时更改颜色。尝试添加

<style type="text/css">
.li .active{
    background-color : blue
}
</style>

到我的布局头标签。这是行不通的。尝试一切只是为了获得效果，但它失败了。我尝试添加到我的 bootstrap.css bcos 我注意到.pager 下没有活动属性。它也没有响应。请问我该如何实现？我如何使它工作？任何帮助将不胜感激。

更新

实际上我想使用分页类，但它并没有完全工作。我尝试了默认示例，但它不起作用。当我尝试 bootstrap 中的默认示例时，它就是这样显示的。但是，寻呼机类有效，所以我别无选择，只能使用寻呼机。

【问题讨论】：

这个AddCssClass方法，是用户定义的方法吗？？因为在 JQuery 中我们使用 jQuery addClass() 方法，来添加任何 css 类。
AddCssClass 是来自 microsoft TabBuider Class 的方法。它动态地具有现有 css 类的类。我在他的 pro asp.net mcv 4 书中效仿了 Adam Freeman 的示例，这确实非常有效。您可以添加类并将其设置在您的 css 文件中。有关 AddCssClass，请参见 msdn.microsoft.com/en-us/library/…">。 @Nayana_Das 如果您有任何选择，请向我解释。我现在似乎没有这样做。
对不起，要添加css类，我通常使用jQuery addClass() 或javascript className，两者都太容易使用，所以我没有想到任何替代方法。希望任何人都提供另一种方法。祝你好运。

标签： jquery css twitter-bootstrap pagination

【解决方案1】：

试试这个 html 和 css 代码，我会有所帮助。

    .pager li.active > a, .pager li.active > span{
        background-color:#eee;
        pointer-events:none;
    }

HTML

<div class="pagination pagination-large">
    <ul class="pager"><li class="active"><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li></ul>
</div>

Live Demo

【讨论】：

感谢您的帮助。我正在动态添加<li class="active">。当我手动添加时它可以工作。然而，它不是动态的。请参阅上面的代码 tag.AddCssClass("active"); 。谢谢