僅使用CSS在按鈕列表中顯示的按鈕單擊顯示

Question

我在清單（ul> li）格式的HTML中有4個按鈕。 我想實現一種功能，其中一個按鈕將顯示為單擊（應用了單擊的CSS樣式）。 然后，在單擊列表中的任何其他按鈕時，應更改已單擊的按鈕樣式，然后僅應將新單擊的按鈕顯示為已單擊（已應用單擊的CSS樣式）。 因此，其他按鈕將具有未單擊的樣式。

可以使用javascipt處理，但我特別希望僅使用CSS來實現。 我無法解決這個問題。

我是CSS編程的新手，因此需要這方面的幫助。

Answer 1

從所有其他元素中刪除該類后，將該類添加到clicked元素中。 使用jquery addClass和removeClass方法。使用帶輸入標簽的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>

僅使用CSS在按鈕列表中顯示的按鈕單擊顯示

問題描述

1 個解決方案

解決方案1
1 已采納 2016-01-08 10:35:14

僅使用CSS在按鈕列表中顯示的按鈕單擊顯示

問題描述

1 個解決方案

解決方案1 1 已采納 2016-01-08 10:35:14

解決方案1
1 已采納 2016-01-08 10:35:14