2

我将如何做到这一点，以便当我单击一个按钮时，该按钮保持该颜色，直到单击另一个按钮？

为了澄清，假设你有一个文本框。单击它时，您可以添加边框，因为您喜欢它，input:focus{border:#000}并且当输入失去焦点或单击另一个文本框时，边框属性将恢复为默认值。

我将如何使用按钮完成此操作。我觉得我需要使用 :after 或其他东西。

我的代码

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;
}
4

2 回答 2

2

我能想到的唯一方法是使用 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 标记或外部文件中并包含它，就可以了。希望有帮助。

于 2011-10-23T03:49:10.247 回答
1

与文本输入不同，某些浏览器在单击按钮元素时似乎不会授予焦点。将属性 onclick="this.focus()" 添加到您的按钮元素以强制执行此问题。不需要 jQuery :-)

于 2013-08-15T03:27:38.630 回答