Question

我有这个小程序（启动屏幕），你看到的按钮就像单选按钮一样工作，但我想要做的就是让你点击它们时保持激活状态，比如：active tag in css，但是当点击另一个按钮时也应该停用它。我无法弄清楚如何做到这一点。

我已经在这个JSFiddle中获得了所有重要的编码： https://jsfiddle.net/za49s56j/

CSS编码：

    input[type="radio"] {
    display:none;
}

input[type="submit"] {
    display:none;
}


html {
    height: 100%;
    background: white;
    background: radial-gradient(circle, #fff 20%, #ccc);
    background-size: cover;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font: bold 14px Arial, sans-serif;
}

.center {
    margin: auto;
    width: 200px;
}

.centerstart {
    margin: auto;
    width: 120px;
}

.keys span{
    float: left;
    position: relative;
    margin: 0 7px 11px 0;
    cursor: pointer;
    width: 80px;
    height: auto;

    background: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    box-shadow: 0px 4px rgba(0, 0, 0, 0.2);

    color: #000;
    line-height: 30px;
    text-align: center;
    user-select: none;

}

.keys span:hover {
    background: rgba(0, 0, 0, 0.3);
    box-shadow: 0px 4px (0, 0, 0, 0.1);
    color: white;
}

.keys span:active {
    box-shadow: 0px 0px #6b54d3;
    top: 4px;
}

input[type=radio]:checked {
    box-shadow: 0px 0px #6b54d3;
    top: 4px;
}

HTML编码：

<body>

<form method="post" action="startgetallenactie.php">
Dit is een oefenspel voor het oefenen van hexadecimale getallen. Kies een moeilijkheidsgraad en opgave: <BR>
(alle hexadecimale waarden moeten met een hoofdletter gegeven worden!) <BR><BR>
<div class="keys" ><div class="center">
<input type="radio" name="moeilijkheidsgraad" value="makkelijk" id="makkelijk" checked>     <label for="makkelijk"><span>makkelijk</span></label>       
<input type="radio" name="moeilijkheidsgraad" value="moeilijk" id="moeilijk">               <label for="moeilijk"><span>makkelijk</span></label>    <BR><BR><BR><BR>

<input type="radio" name="waarde" value="dechex" id="dechex" checked>               <label for="dechex"><span>dec-hex</span></label>            
<input type="radio" name="waarde" value="hexdec" id="hexdec">                       <label for="hexdec"><span>hex-dec</span></label>    <BR><BR><BR>
<input type="radio" name="waarde" value="decbin" id="decbin">                       <label for="decbin"><span>dec-bin</span></label>            
<input type="radio" name="waarde" value="bindec" id="bindec">                       <label for="bindec"><span>bin-dec</span></label>    <BR><BR><BR>
<input type="radio" name="waarde" value="hexbin" id="hexbin">                       <label for="hexbin"><span>hex-bin</span></label>            
<input type="radio" name="waarde" value="binhex" id="binhex">                       <label for="binhex"><span>bin-hex</span></label>
</div>
<BR><BR><BR>
<div class="centerstart">
<input type="submit" value="Start" id="start"> <label for="start"><span>start</span></label>
</div></div>
<BR><BR>

Answer 1

您可以使用纯CSS执行此操作：

input[type="radio"]:checked + label span {
  box-shadow: 0px 0px #6b54d3;
  top: 4px;
}

这是一个演示http://jsbin.com/tehidaxezi/edit?css,output

Answer 2

为什么不使用一个类来表示应用的样式？如果要删除样式，只需删除该类。

.keys span.active {
    box-shadow: 0px 0px #6b54d3;
    top: 4px;
}

使用jQuery添加/删除类：

$(':input[type="radio"]').on('click', function() {
    $(':input[type="radio"]').removeClass('active'); // remove .active from all radios
    $(this).addClass('active'); // add .active to clicked radio
});

单击这些按钮后，如何使这些按钮保持激活状态？

2 个答案: