Bootstrap 轮廓按钮 - 单击时保持背景颜色

Question

我正在使用 Bootstrap 大纲按钮。

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

目前，这只发生在鼠标悬停时。

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" 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>

JSFidle

https://jsfiddle.net/28c0g5Lf/

Answer 1

为焦点点击按钮添加此代码

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

<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" 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>

Working example

Answer 2

万一有人需要...

我遵循 Tzimpo 的建议以及 this tutorial 的 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>

CSS

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

JS

// 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";
  });
}

Working example