Question

我如何制作它以便当我单击按钮时，按钮会保持该颜色直到单击另一个按钮？

澄清一下，想象一下你有一个文本框。单击它时，可以添加边框，因为它具有input:focus{border:#000}，当输入失去焦点或单击其他文本框时，边框属性将恢复为默认值。

如何使用按钮完成此操作。我觉得我需要使用：之后或之类的东西。

我的代码

button.top_bar {
    background-color:#E3E3E3;
    border:#DCDCDC 1px solid;
    border-radius:3px;
    height:40px;
    display:block;
    color:#000;
    postion:relative;
    display:block;
    float:left;
    top:5;
    text-transform:capitalize;
    font-family:Arial;
    font-weight:bold;
    cursor:pointer;
    margin-left:15px;
}

button.top_bar:hover {
   border:#9F9F9F 1px solid;
}

button.top_bar:focus {
    border:#9F9F9F 1px solid;
}

Answer 1

我能想到的唯一方法是使用jQuery或某种Javascript。这是我将如何做到的：我会通过一个类来控制它（我们称之为“.selectedBorder”）。然后单击，抓住您拥有的所有按钮，并关闭所有按钮的边框，然后将其添加到单击的按钮上。这是一个例子：

//first you grab the click event for the button(s)
$("#buttons").click(function(){

    //we remove all the borders from all the buttons
    $("#buttons").removeClass("selectedBorder");

    //Now we add the border to the button that's been clicked
    $(this).addClass("selectedBorder");

});

这应该可以解决问题。只需将其添加到javascript标记或外部文件中并包含它，您应该很高兴。希望有所帮助。

Answer 2

与文本输入不同，某些浏览器在单击按钮元素时似乎不会授予焦点。在你的button元素中添加一个属性onclick =“this.focus（）”来强制解决问题。不需要jQuery :-)

CSS Button：焦点伪类

我的代码

2 个答案: