Question

我想在点击时突出显示分页链接。请帮帮我

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链接。但我的问题是，每个链接在加载页面上都是高亮的，但我想在点击分页链接时只显示活动链接

请帮助我

Answer 1

尝试:active选择器，它只响应点击次数，例如CSS：

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

这是关于JSFiddle的演示：https://jsfiddle.net/15ydkjdg/

想要在点击时突出显示分页链接。这是我的代码

1 个答案: