Css 引导轮廓按钮-单击时保持背景色

我正在使用引导轮廓按钮

单击时如何保持“活动”按钮的背景色？

现在，这只发生在鼠标悬停时

HTML

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group-vertical btn-group-toggle d-flex align-items-center justify-content-center" id="buttonsDiv" data-toggle="buttons">
    <button type="button" class="btn btn-outline-dark btn-sm btn-block m-1 p-1" id="btn1" data-toggle="button" aria-pressed="false">
        btn1
    </button>

    <button type="button" class="btn btn-outline-dark btn-sm btn-block m-0 p-1" id="btn2" data-toggle="button" aria-pressed="false">
        btn2
    </button>

    <button type="button" class="btn btn-outline-dark btn-sm btn-block m-1 p-1" id="btn3" data-toggle="button" aria-pressed="false">
        btn3
    </button>

    <button type="button" class="btn btn-outline-dark btn-sm btn-block m-0 p-1" id="btn4" data-toggle="button" aria-pressed="false">
        btn4
    </button>
</div>

btn1
btn2
btn3
btn4

为重点单击的按钮添加此代码

按钮：焦点{
颜色：#fff；
背景色：#343a40；
边框颜色：#343a40；
}

btn1
btn2
btn3
btn4

为重点单击的按钮添加此代码

按钮：焦点{
颜色：#fff；
背景色：#343a40；
边框颜色：#343a40；
}

btn1
btn2
btn3
btn4

以防有人需要它

我按照Tzinpo的建议和JavaScript部分一起开始工作

HTML

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group-vertical btn-group-toggle d-flex align-items-center justify-content-center" id="buttonsDiv" data-toggle="buttons">
    <button type="button" class="btn btn-outline-dark btn-sm btn-block m-1 p-1" id="btn1" data-toggle="button" aria-pressed="false">
        btn1
    </button>

    <button type="button" class="btn btn-outline-dark btn-sm btn-block m-0 p-1" id="btn2" data-toggle="button" aria-pressed="false">
        btn2
    </button>

    <button type="button" class="btn btn-outline-dark btn-sm btn-block m-1 p-1" id="btn3" data-toggle="button" aria-pressed="false">
        btn3
    </button>

    <button type="button" class="btn btn-outline-dark btn-sm btn-block m-0 p-1" id="btn4" data-toggle="button" aria-pressed="false">
        btn4
    </button>
</div>

JS

button:focus{
  color: #fff;
    background-color: #343a40;
    border-color: #343a40;
}

// Get the container element
var btnContainer = document.getElementById("buttonsDiv");

// Get all buttons with class="btn" inside the container
var btns = btnContainer.getElementsByClassName("btn");

// Loop through the buttons and add the active class to the current/clicked button
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");

    // If there's no active class
    if (current.length > 0) {
      current[0].className = current[0].className.replace(" active", "");
    }

    // Add the active class to the current/clicked button
    this.className += " active";
  });
}

//获取容器元素
var btnContainer=document.getElementById（“buttonsDiv”）；
//获取容器内class=“btn”的所有按钮
var btns=btnContainer.getElementsByClassName（“btn”）；
//循环浏览按钮并将活动类添加到当前/单击的按钮
对于（变量i=0；i0）{
当前[0]。className=current[0]。className.replace（“活动的”）；
}
//将活动类添加到当前/单击的按钮
this.className+=“活动”；
});
}

---

万一有人需要它

我按照Tzinpo的建议和JavaScript部分一起开始工作

HTML

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group-vertical btn-group-toggle d-flex align-items-center justify-content-center" id="buttonsDiv" data-toggle="buttons">
    <button type="button" class="btn btn-outline-dark btn-sm btn-block m-1 p-1" id="btn1" data-toggle="button" aria-pressed="false">
        btn1
    </button>

    <button type="button" class="btn btn-outline-dark btn-sm btn-block m-0 p-1" id="btn2" data-toggle="button" aria-pressed="false">
        btn2
    </button>

    <button type="button" class="btn btn-outline-dark btn-sm btn-block m-1 p-1" id="btn3" data-toggle="button" aria-pressed="false">
        btn3
    </button>

    <button type="button" class="btn btn-outline-dark btn-sm btn-block m-0 p-1" id="btn4" data-toggle="button" aria-pressed="false">
        btn4
    </button>
</div>

JS

button:focus{
  color: #fff;
    background-color: #343a40;
    border-color: #343a40;
}

// Get the container element
var btnContainer = document.getElementById("buttonsDiv");

// Get all buttons with class="btn" inside the container
var btns = btnContainer.getElementsByClassName("btn");

// Loop through the buttons and add the active class to the current/clicked button
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");

    // If there's no active class
    if (current.length > 0) {
      current[0].className = current[0].className.replace(" active", "");
    }

    // Add the active class to the current/clicked button
    this.className += " active";
  });
}

//获取容器元素
var btnContainer=document.getElementById（“buttonsDiv”）；
//获取容器内class=“btn”的所有按钮
var btns=btnContainer.getElementsByClassName（“btn”）；
//循环浏览按钮并将活动类添加到当前/单击的按钮
对于（变量i=0；i0）{
当前[0]。className=current[0]。className.replace（“活动的”）；
}
//将活动类添加到当前/单击的按钮
this.className+=“活动”；
});
}

---

刚刚注意到，当我单击页面中的其他位置时，背景色消失了。。。有什么想法吗？是的，因为按钮元素失去了焦点。没有，我希望一次只能激活一个按钮。你的建议一开始似乎有效，但在我点击一个按钮（他看起来“激活了，背景色正常”）后，如果我点击页面中的其他任何地方（而不是另一个按钮）背景色消失…在您的工作示例中，单击按钮下方的白色区域，您将看到我的意思。@GabrielLeite我解除了重新启动问题。发生这种情况是因为单击其他地方的按钮失去焦点属性。您必须使用javascript或jQuery进行此操作。刚才注意到，当我单击时背景色消失点击页面中的其他地方…有什么想法吗？是的，因为按钮元素失去了焦点。没有，我希望一次只能激活一个按钮。起初你的建议似乎有效，但当我点击页面中的其他地方（而不是另一个按钮）时，我点击了一个按钮（他看起来“已激活，背景色正常”）背景色消失了。。。在您的工作示例中，单击按钮下方的白色区域，您将看到我的意思。@GabrielLeite我解开了问题。发生这种情况是因为onclick“别处”按钮失去焦点属性。为此，必须使用javascript或jQuery