选择一个按钮处于活动状态 class
Selecting a button active class
这些是卡片,我已经将 javascript 写入 select 按钮并将其变为活动 class 但是当我 select 按钮时它不是select 而不是变成活动按钮错误在哪
在样式标签中,我写了当按钮悬停或激活时我想做的所有事情
这里是 javascript
<script>
// Add active class to the current button (highlight it)
var header = document.getElementById("price");
var head = header.getElementsByClassName("card");
var btns = head.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
if (current.length > 0) {
current[0].className = current[0].className.replace(" active", "");
}
this.className += " active";
});
}
</script>
.card .card-body a{
margin-bottom: 2.5rem;
border: solid yellow;
border-top-width: initial!important;
color: white;
background-color: transparent;
font-size: 1.3rem;
min-width:13rem;
}
.card .card-body a:hover{
color: #d6c926;
{% comment %} border: none; {% endcomment %}
{% comment %} border-bottom: solid blue; {% endcomment %}
background-color: #191818cf;
font-family:cursive;
text-decoration: none;
{% comment %} animation: border-line 3s ease forwards; {% endcomment %}
}
.card .card-body a:active,
.card .card-body a.active{
background-color: #d6c926!important;
color: black!important;
border: black!important;
font-family: cursive;
}
<div class="form-row" id="price">
<div class="card border-warning mb-3" style="max-width: 18rem;">
<div class="card-header"><strong>1 Mounth</strong></div>
<div class="card-body text-warning">
<h5 class="card-title">Warning card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a class="btn btn-primary active 1_mon">Select This</a>
</div>
</div>
<div class="card border-warning mb-3" style="max-width: 18rem;">
<div class="card-header"><strong>6 Mounth</strong></div>
<div class="card-body text-warning">
<h5 class="card-title">Warning card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a class="btn btn-primary 6_mon">Select This</a>
</div>
</div>
<div class="card border-warning mb-3" style="max-width: 18rem;">
<div class="card-header"><strong>10 Mounth</strong></div>
<div class="card-body text-warning">
<h5 class="card-title">Warning card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a class="btn btn-primary 10_mon">Select This</a>
</div>
</div>
</div>
在此之后,我必须获取按钮的值并将其存储到隐藏的输入标签中
试试这个:-
<script>
var btns = document.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function(){
var current = document.getElementsByClassName("active");
if (current.length > 0){
current[0].className = current[0].className.replace(" active", "");
}
this.className += " active";
});
}
</script>
这些是卡片,我已经将 javascript 写入 select 按钮并将其变为活动 class 但是当我 select 按钮时它不是select 而不是变成活动按钮错误在哪
在样式标签中,我写了当按钮悬停或激活时我想做的所有事情
这里是 javascript
<script>
// Add active class to the current button (highlight it)
var header = document.getElementById("price");
var head = header.getElementsByClassName("card");
var btns = head.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
if (current.length > 0) {
current[0].className = current[0].className.replace(" active", "");
}
this.className += " active";
});
}
</script>
.card .card-body a{
margin-bottom: 2.5rem;
border: solid yellow;
border-top-width: initial!important;
color: white;
background-color: transparent;
font-size: 1.3rem;
min-width:13rem;
}
.card .card-body a:hover{
color: #d6c926;
{% comment %} border: none; {% endcomment %}
{% comment %} border-bottom: solid blue; {% endcomment %}
background-color: #191818cf;
font-family:cursive;
text-decoration: none;
{% comment %} animation: border-line 3s ease forwards; {% endcomment %}
}
.card .card-body a:active,
.card .card-body a.active{
background-color: #d6c926!important;
color: black!important;
border: black!important;
font-family: cursive;
}
<div class="form-row" id="price">
<div class="card border-warning mb-3" style="max-width: 18rem;">
<div class="card-header"><strong>1 Mounth</strong></div>
<div class="card-body text-warning">
<h5 class="card-title">Warning card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a class="btn btn-primary active 1_mon">Select This</a>
</div>
</div>
<div class="card border-warning mb-3" style="max-width: 18rem;">
<div class="card-header"><strong>6 Mounth</strong></div>
<div class="card-body text-warning">
<h5 class="card-title">Warning card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a class="btn btn-primary 6_mon">Select This</a>
</div>
</div>
<div class="card border-warning mb-3" style="max-width: 18rem;">
<div class="card-header"><strong>10 Mounth</strong></div>
<div class="card-body text-warning">
<h5 class="card-title">Warning card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a class="btn btn-primary 10_mon">Select This</a>
</div>
</div>
</div>
在此之后,我必须获取按钮的值并将其存储到隐藏的输入标签中
试试这个:-
<script>
var btns = document.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function(){
var current = document.getElementsByClassName("active");
if (current.length > 0){
current[0].className = current[0].className.replace(" active", "");
}
this.className += " active";
});
}
</script>