按下按钮的CSS

debugcn 发表于 Dev

用户3163600

在开始之前，我发现了这个主题：按下<button> CSS，它给出了我要寻找的答案的一半。

我在链接中有一个按钮，我希望它在被按下后能保持他的风格。另外，当我单击页面上的其他位置时，我想将其恢复为正常样式（在按下之前）。

这是我的代码：

jQuery('.btnpublish').click(function(){
   jQuery(this).toggleClass('active');
});

.btnpublish{
background-color: #7f8c8d;
border: 1px solid #7f8c8d;
font-weight: bold;
}

.btnpublish:hover{
background-color: #3498db;
border: 1px solid #3498db;
}

.btnpublish:active{
background-color: #3498db;
border: 1px solid #3498db;
}

.btnpublish.active{
background-color: #3498db;
border: 1px solid #3498db;
}

<ul class="" role="tablist">
<li class="active listlayer6publish"><a class="btn btn-dark btnpublish" href="#vtab1" role="tab" data-toggle="tab"> Sports</a></li>
<li class="listlayer6publish"><a class="btn btn-dark " href="#vtab2" role="tab" data-toggle="tab"> Santé</a></li>
</ul>

现在，当我按下“运动”按钮时，在我再次按下该按钮之前，它将保持活动样式。唯一的问题是，当我按页面上的其他任何位置时，我都想更改它。

zer00ne

使用radio带有标签的隐藏输入要容易得多。我添加并修改了jQuery，尽管您不需要它来产生效果。看到这个帖子

$(function() {
  $('.btn').on('click', function(event) {
    $(this).addClass('active');
    $('.btn').not(this).removeClass('active');
  });
});

.tablist input[type="radio"] {
  display: none;
}
.tablist label {
  display: inline-block;
  background-color: #ddd;
  color: grey;
  padding: 3px 6px;
  font-family: Arial;
  font-size: 16px;
  border: 1px inset grey;
  border-radius: 6px;
  cursor: pointer;
}
.tablist input[type="radio"]:checked + label {
  background-color: transparent;
  color: blue;
  border: 1px inset blue;
}
fieldset {
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: -fit-content;
  border-radius: 6px;
}
.btn {
  text-decoration: none;
  /* When you integrate this code, change none to auto */
  pointer-events: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset class="tablist">
  <input type="radio" id="r1" name="rad" data-toggle="tab" checked>
  <label for="r1" class="tag">
    <a href="#" class="btn active" data-toggle="tab">Sports</a>
  </label>

  <input type="radio" id="r2" name="rad" data-toggle="tab">
  <label for="r2" class="tag">
    <a href="#" class="btn" data-toggle="tab">Sante</a>
  </label>

  <input type="radio" id="r3" name="rad">
  <label for="r3" class="tag">
    <a href="#" class="btn" data-toggle="tab">Claus</a>
  </label>
</fieldset>