想要点击高亮分页链接.这是我的密码

Want to highlite pagination link on click. here is my code

本文关键字：我的 密码 链接 分页 高亮      更新时间：2023-09-26

我想在点击时高亮显示分页链接。请帮我做这个

CSS分页样式模板

#tnt_pagination {
    display:block;
    text-align:left;
    height:22px;
    line-height:21px;
    clear:both;
    padding-top:3px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    font-weight:normal;
}
#tnt_pagination a:link, #tnt_pagination a:visited{
    padding:7px;
    padding-top:2px;
    padding-bottom:2px;
    border:1px solid #EBEBEB;
    margin-left:10px;
    text-decoration:none;
    background-color:#F5F5F5;
    color:#0072bc;
    width:22px;
    font-weight:normal;
}
#tnt_pagination a:hover {
    background-color:#DDEEFF;
    border:1px solid #BBDDFF;
    color:#0072BC;  
}
#tnt_pagination .active_tnt_link {
    padding:7px;
    padding-top:2px;
    padding-bottom:2px;
    border:1px solid #BBDDFF;
    margin-left:10px;
    text-decoration:none;
    background-color:#DDEEFF;
    color:#0072BC;
    cursor:default;
}
#tnt_pagination .disabled_tnt_pagination {
    padding:7px;
    padding-top:2px;
    padding-bottom:2px;
    border:1px solid #EBEBEB;
    margin-left:10px;
    text-decoration:none;
    background-color:#F5F5F5;
    color:#D7D7D7;
    cursor:default;
}
#tnt_pagination a.highlite {
            font-weight:bold;
        }
</style>
</head>
<body>
<div id="tnt_pagination">
    <span class="disabled_tnt_pagination">Prev</span>
        <a id="default" class="highlite" onclick="highlite(this);"  href="#1">1</a>
        <a id="default" class="highlite" onclick="highlite(this);" href="#2">2</a>
        <a id="default" class="highlite" onclick="highlite(this);" href="#3">3</a>
        <a id="default" class="highlite" onclick="highlite(this);" href="#4">4</a>
        <a id="default" class="highlite" onclick="highlite(this);" href="#5">5</a>
        <a id="default" class="highlite" onclick="highlite(this);" href="#6">6</a>
        <a id="default" class="highlite" onclick="highlite(this);" href="#7">7</a>
        <a id="default" class="highlite" onclick="highlite(this);" href="#8">8</a>
        <a id="default" class="highlite" onclick="highlite(this);" href="#9">9</a>
        <a id="default" class="highlite" onclick="highlite(this);" href="#10">10</a>
        <a id="default" class="highlite" onclick="highlite(this);" href="#forwaed">Next</a>
</div>
</body>
</html>

我想点击后高亮显示分页链接。

这里是一个简单的分页示例，其中我使用了1到10个链接，还使用css禁用了prev链接。但我的问题是，加载页面上的每个链接都是高亮的，但我想在点击分页链接时只高亮显示活动链接

请在这个中帮助我

尝试只响应点击的:active选择器，例如在您的CSS:中

#tnt_pagination a.highlite:active{
    background-color: yellow;
    font-weight:bold;
}

以下是JSFiddle上的演示：https://jsfiddle.net/15ydkjdg/

相关文章：