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

Question

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

这可以使用 javascipt 来处理，但我特别希望仅使用 css 来实现。我无法解决这个问题。

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

Answer 1

在从所有其他元素中删除 class 后，将 class 添加到单击的元素。使用 jquery addClass 和 removeClass methods.The 仅扩展您可以使用带有输入标签的 css 是通过使用伪 class :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>

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

Button clicked display in the list of buttons using CSS only

html

css

css-transitions