主页 / 问题 / 852439
Accepted
stiv
Asked:2020-07-10 10:32:50 +0000 UTC2020-07-10 10:32:50 +0000 UTC

切换按钮颜色

  • 772

我不知道如何制作它，以便只有一个按下的按钮具有活动颜色。现在，单击后每个按钮都会添加一种颜色。

$('.view-btn').click(function(){
  $(this).css("background", "#0074d6");
});
.view-btn {
  cursor: pointer;
  padding: 15px;
  color: #fff;
  background: blue;
  display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="view-btn">
  *
</div>
<div class="view-btn">
  *
</div>
<div class="view-btn">
  *
</div>

html

2 个回答

  1. Best Answer

    $('.view-btn').click(function(){
  $('.view-btn').removeClass("active");
  $(this).addClass("active");
});
    .view-btn {
  cursor: pointer;
  padding: 15px;
  color: #fff;
  background: blue;
  display: inline-block;
}
.active {
  background: #0074d6;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="view-btn">
  *
</div>
<div class="view-btn">
  *
</div>
<div class="view-btn">
  *
</div>

    没有活跃课

    $('.view-btn').click(function(){
  $('.view-btn').css("background", "");
  $(this).css("background", "#0074d6");
});
    .view-btn {
  cursor: pointer;
  padding: 15px;
  color: #fff;
  background: blue;
  display: inline-block;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="view-btn">
  *
</div>
<div class="view-btn">
  *
</div>
<div class="view-btn">
  *
</div>

    • 4

  2. 即使没有也有可能JavaScript

    .view-btn{
  display:inline-block;
  position:relative;
  width:30px;
}
.view-btn input{
  display:block;
  position:absolute;
  top:0;
  left:0;
  margin:0;
  width:100%;
  height:100%;
  opacity:0;
  cursor:pointer;
}
.view-btn span{
  display:block;
  width:100%;
  line-height:30px;
  text-align:center;
  background-color:#acd;
}
.view-btn :checked + span{
  background-color:#cda;
}
    <div class="view-btn">
  <input type="radio" name="btn" />
  <span>*</span>
</div>
<div class="view-btn">
  <input type="radio" name="btn" />
  <span>*</span>
</div>
<div class="view-btn">
  <input type="radio" name="btn" />
  <span>*</span>
</div>
<div class="view-btn">
  <input type="radio" name="btn" />
  <span>*</span>
</div>
<div class="view-btn">
  <input type="radio" name="btn" />
  <span>*</span>
</div>

    • 2

相关问题