如何在GridView的PagerTemplate中高亮分页当前页码？

开发者阿泽

2026-5-26

嘿，我来帮你搞定GridView激活分页单元格的背景色问题！

首先，ASP.NET的GridView在渲染数字分页时，当前激活的页码（也就是你正在查看的那一页）会被渲染成一个带aspNetDisabled类的<span>标签（因为它不可点击），而其他可点击的页码则是<a>标签。我们可以针对这个特性来定制样式。

步骤1：给GridView分页栏添加自定义CSS类

先修改你的GridView代码，给分页栏指定一个专属的CSS类，避免样式影响到其他控件：

<asp:GridView ID="GridView1" runat="server" PageSize="20" 
    OnPageIndexChanging="GridView1_PageIndexChanging" 
    AllowPaging="True" OnDataBound="GridView1_DataBound" 
    Style="position: static">
    <PagerSettings Position="Top" Mode="Numeric" />
    <!-- 添加这一行，给分页栏设置CSS类 -->
    <PagerStyle CssClass="GridViewPager" />
</asp:GridView>

步骤2：编写CSS样式设置激活页码的背景色

接下来在你的CSS文件里添加这些样式，你可以把颜色换成和悬停效果匹配的色调：

/* 分页栏的基础样式（可选，用来统一内边距、间距） */
.GridViewPager {
    margin: 10px 0;
}

/* 激活状态的分页单元格（当前页码） */
.GridViewPager .aspNetDisabled {
    background-color: #ff6600; /* 替换成你想要的激活背景色 */
    color: #ffffff; /* 文字颜色，确保和背景有清晰对比 */
    padding: 4px 8px; /* 和其他页码保持一致的内边距 */
    border-radius: 4px; /* 可选，添加圆角让样式更和谐 */
    cursor: default; /* 鼠标移上去显示默认指针，因为不可点击 */
}

/* 保留你已有的鼠标悬停效果 */
.GridViewPager a:hover {
    background-color: #ff9933; /* 你原来的橙色悬停色 */
    color: #ffffff;
    padding: 4px 8px;
    border-radius: 4px;
}