Question

我知道有一种简单的方法可以做到这一点，但我似乎找不到它。我有一个下拉框，其中有一个列表。将鼠标悬停在列表中的任何一个项目上后，它就会被边框包围。这很棒。

我想要的是当用户从此列表中选择一个项目时。它会自动将背景颜色更改为#ddd。

如果用户从列表中选择了另一个项目，它将取消选择其他项目项目背景。

所以，我有一个名为'hi'的课程。

我的CSS就像这样：

#changer a{
    padding:3px;
    border: solid 1px #fff;    
}
#changer a.hi{
    background:#ddd;
}
#changer a:hover{
    border: solid 1px #ddd;
    text-decoration:none;
}

我添加了这个脚本，但它只是从列表中选择了该项，但它没有取消选择另一个。它只是切换背景颜色。

<script type="text/javascript">
$(function() {
  $("a").click(function() {
    $(this).toggleClass("hi");
  });
});
</script>

任何帮助都会受到赞赏。

干杯，

强尼

Answer 1

试试这个：

$("a").click(function() {

    // remove existing "hi"s on other links
    $("a.hi").not(this).removeClass("hi");

    // toggle "hi" on this
    $(this).toggleClass("hi");
});

如果您希望链接的行为类似于互斥复选框（只能选择一个，但也可以取消选择当前），请使用上面的代码，但是如果您希望它们的行为类似于一组单选按钮（只能选择）一，但不能取消选择当前），请改用以下内容。

$("a").click(function() {

    // remove existing "hi"s on other links
    $("a.hi").not(this).removeClass("hi");

    // add "hi" to this
    if (!$(this).hasClass('hi'))
        $(this).addClass("hi");
});

Answer 2

你可以在这个写作中使用:active，如下所示：

#changer a:active{
    background:#ddd;
}

在选择时更改CSS元素

2 个答案: