Question

我有像1,2,3,4这样的分页链接......我试图改变当前页面的外观像这样的东西

$(".pg"+this.currentPage).css({"color":"#2F557B",
                           "background-color":"#FFFFC4",
                          "border":"solid 1px #2F557B",
                           "cursor":"default"});

例如。当选择<a>＃1时，以上适用。但<a>＃2被选中，这也有上面的风格（我想要），但我怎样才能将<a>＃1风格重置为旧版？任何想法都将受到高度赞赏。

Answer 1

最简单的方法是将选定状态的CSS定义为一个类。

当您设置当前链接的选定状态时，首先从所有其他链接中删除该CSS类。

例如：

让我们假装你的标记看起来像这样。您在div中有分页链接，并且当前选择了Page 1链接。

<style type="text/css">
    .selected {
        color:  #2F557B;
        background:  #FFFFC4;
        border:  1px solid #2F557B;
        cursor:  default;
    }
</style>

<div id="PageLinks">
    <a href="#1" class="selected">Page 1</a>
    <a href="#2">Page 2</a>
    <a href="#3">Page 3</a>
</div>

让我们假设我们将在点击时更改链接的样式。

$('#PageLinks a').click( function(e) {
    //Remove the selected class from all of the links
    $('#PageLinks a.selected').removeClass('selected');

    //Add the selected class to the current link
    $(this).addClass('selected');
});

Answer 2

找到适用于所有链接的选择器（例如“.pager”或“#pager a”）。还要创建一个应用额外样式的CSS类（比如“.selected”）。然后做

$(".pager").removeClass("selected");
$(".pg" + this.currentPage).addClass("selected");

这将清除所有链接中的“选定”样式，并将其重新应用于您需要的样式。

Answer 3

将此函数保存在css或创建div的页面中

$('#PageLinks a').click( function(e) {
    //Remove the selected class from all of the links
    $('#PageLinks a.selected').removeClass('selected');

    //Add the selected class to the current link
    $(this).addClass('selected');
});

Answer 4

您可能希望创建一个具有其他CSS属性的类，并使用.toggle()根据需要添加/删除该类。

http://api.jquery.com/toggle/

用jquery改变所选锚标记的css

4 个答案: