为当前页面提供活动类

Question

我为我的 listview 使用了 datapager。如果用户在第二页，我希望第二个数字应该突出显示。 datapager 代码在这里

.pagination {
  font-family: 'signika_negativeRegular', sans-serif;
  font-size: 13px;
}
.pagination a,
.pagination strong {
  background: #fff;
  /* display: inline-block; */
  margin-right: 3px;
  padding: 4px 12px;
  text-decoration: none;
  line-height: 1.5em;
  /* -webkit-border-radius: 3px; */
  -moz-border-radius: 3px;
  /* border-radius: 3px; */
  border: 1px solid#ccc;
}
.pagination a:hover {
  background-color: red;
  color: #fff;
}
.pagination a:active {
  background: #ccc;
  padding: 4px 6px;
}
.pagination strong {
  border: 1px solid #ccc;
  font-size: 13px;
  color: #cf060d;
}

HTML：

<div class="pagination">
  <asp:DataPager ID="dpNews" runat="server" PagedControlID="lstNews" PageSize="3">
    <Fields>
      <asp:NextPreviousPagerField ButtonType="Link" ShowFirstPageButton="false" ShowPreviousPageButton="true" ShowNextPageButton="false" />
      <asp:NumericPagerField ButtonType="Link" />
      <asp:NextPreviousPagerField ButtonType="Link" ShowNextPageButton="true" ShowLastPageButton="false" ShowPreviousPageButton="false" />
    </Fields>
  </asp:DataPager>
</div>

请帮忙

Answer 1

您可以尝试添加新的 css 样式，然后您可以使用 CurrentPageLabelCssClass 属性来分配 css 类，如下所示

.pagination
    {
        font-family: 'signika_negativeRegular' , sans-serif;
        font-size: 13px;
    }

    .pagination a, .pagination strong
    {
        background: #fff; /* display: inline-block; */
        margin-right: 3px;
        padding: 4px 12px;
        text-decoration: none;
        line-height: 1.5em; /* -webkit-border-radius: 3px; */
        -moz-border-radius: 3px; /* border-radius: 3px; */
        border: 1px solid#ccc;
    }

    .pagination a:hover
    {
        background-color: red;
        color: #fff;
    }

    .pagination a:active
    {
        background: #ccc;
        padding: 4px 6px;
    }


    .pagination strong
    {
        border: 1px solid #ccc;
        font-size: 13px;
        color: #cf060d;
    }

    .current-page
    {
        background-color: red;
        color: #fff;
    }

HTML：

<div class="pagination">
    <asp:DataPager ID="dpNews" runat="server" PagedControlID="ListView1" PageSize="3">
        <Fields>
            <asp:NextPreviousPagerField ButtonType="Link" ShowFirstPageButton="false" ShowPreviousPageButton="true"
                ShowNextPageButton="false" />
            <asp:NumericPagerField ButtonType="Link" CurrentPageLabelCssClass="current-page" />
            <asp:NextPreviousPagerField ButtonType="Link" ShowNextPageButton="true" ShowLastPageButton="false"
                ShowPreviousPageButton="false" />
        </Fields>
    </asp:DataPager>
</div>

希望对你有帮助:)