twitter-bootstrap 在 bootstrap pager 中设置活动页面（分页）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27199286/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Set active page in bootstrap pager (pagination)
提问by Nuru Salihu
i am using bootstrap pager for pagination. For some reason, i prefare the pager over the pagination feature. when i put the <ul class="pager">inside the pagination class. It does not work and get mess up instead. I remove the pagination and the pager is working fine. I am generating my links dynamically like below.
我正在使用引导寻呼机进行分页。出于某种原因，我更喜欢寻呼机而不是分页功能。当我把<ul class="pager">里面的分页类。它不起作用，反而变得一团糟。我删除了分页，寻呼机工作正常。我正在动态生成我的链接，如下所示。
<ul class="pager">
<li class="previous disabled"><a href="#">← Previous</a></li>
<li class="disabled"><span>«</span></li>
<li>@Html.PageLinks(Model.PagingInfo, x => Url.Action("List", new {page = x}))</li>
<li><a href="#">»</a></li>
<li class="next"><a href="#"> Next →</a></li>
</ul>
my PageLinksis the html helper below.
我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());
}
My problem is i want to set the active selection property as returned from the htmlhelper method. I want to change the color when active. try adding
我的问题是我想设置从 htmlhelper 方法返回的活动选择属性。我想在活动时更改颜色。尝试添加
<style type="text/css">
.li .active{
background-color : blue
}
</style>
to my layout head tag. It does not work. try everything just to get an effect , but it fails. I try adding to my bootstrap.css bcos i notice under .pagerthere is no active property. It does not respond also.Please how do i achieve this? how do i make it work? any help would be appreciated.
到我的布局头标签。这是行不通的。尝试一切只是为了获得效果，但它失败了。我尝试添加到我的 bootstrap.css bcos 我注意到.pager没有活动属性。它也没有响应。请问我如何实现这一目标？我如何使它工作？任何帮助，将不胜感激。
Update
更新
Actually i wanted to use the pagination class but it was not working totally. I try the default example yet it does not work. When i try the default example from boot strap , this is how it displays. However, the pager class works, so i have no option than to use the pager.
其实我想使用分页类，但它没有完全工作。我尝试了默认示例，但它不起作用。当我尝试引导带中的默认示例时，它是这样显示的。但是，寻呼机类有效，所以我别无选择，只能使用寻呼机。
回答by Mansukh Khandhar
try this html and css code i hops it help.
试试这个 html 和 css 代码，我希望它有帮助。
.pager li.active > a, .pager li.active > span{
background-color:#eee;
pointer-events:none;
}
HTML
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>
