按钮单击显示在按钮列表中仅使用CSS

Question

我有4个HTML按钮，它是list (ul > li)格式的。我想实现一个功能，其中一个按钮将显示为单击(应用的点击css样式)。然后，在单击列表中的任何其他按钮时，已经单击的按钮样式应该更改，然后只应显示新单击的按钮为单击(应用了单击的css样式)。因此，其他按钮将具有未单击的样式。

这可以使用javascipt来处理，但我特别希望只使用css来实现这一点。我解决不了这个问题。

我是CSS编程新手，因此在这方面请求帮助。

Answer 1

将类从所有其他元素中移除后，向单击元素中添加类。使用jquery addClass和removeClass methods.The扩展，您可以通过使用带有输入标记的css实现伪类:focus(不过，在按钮外单击将移除焦点)。如果要单击按钮之外的任何位置，就不可能保留样式。

​

$(document).ready(function(){
  $('input[type=button]').click(function(){
    $('.active').removeClass('active');
    $(this).addClass('active');
  });
});

.active{
  background:white;
  border:1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul> <li> <input type="button" value="A"/> </li> <li> <input type="button" value="B"/> </li> <li> <input type="button" value="C"/> </li> <li> <input type="button" value="D"/> </li> </ul>

​

如果您想避免jquery，那么使用selector.className (类型字符串)或selector.classList (类型数组)。

编辑

如果您愿意使用锚而不是输入标记，那么我为您提供了一个纯css解决方案。

​

a {
    display: block;
    border: 2px solid black;
    text-align: center;
  margin:5px;
  text-decoration:none;
}



a:active,a:target {
    border: 2px solid red;
}

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>

  <ul> <li> <a href="#a" id="a"/>a</a> </li> <li> <a href="#b" id="b"/>b</a> </li> <li> <a href="#c" id="c"/>c</a> </li> <li>  <a href="#d" id="d"/>d</a> </li> </ul>
</body>
</html>

​