Fatal编程技术网
  • html/
  • Html 如何使这些按钮在单击后保持激活状态？

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

html css

Html 如何使这些按钮在单击后保持激活状态？,html,css,Html,Css,我有一个小程序startscreen，你看到的按钮就像单选按钮一样工作，但我想做的是，当你点击它们时，让它们保持激活状态，比如css中的：active标记，但当点击另一个按钮时，它也应该被停用。。 我不知道怎么做 我在这个JSFIDLE中获得了所有重要的编码： CSS编码： input[type="radio"] { display:none; } input[type="submit"] { display:none; } html { height:

我有一个小程序startscreen，你看到的按钮就像单选按钮一样工作，但我想做的是，当你点击它们时，让它们保持激活状态，比如css中的：active标记，但当点击另一个按钮时，它也应该被停用。。 我不知道怎么做

我在这个JSFIDLE中获得了所有重要的编码：

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>
为什么不使用类来指示应用的样式？要删除样式时，只需删除该类

.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
});
为什么不使用类来指示应用的样式？要删除样式时，只需删除该类

.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
});
您可以使用纯CSS执行此操作，如下所示：

input[type="radio"]:checked + label span {
  box-shadow: 0px 0px #6b54d3;
  top: 4px;
}
下面是一个演示

您可以使用纯CSS来实现这一点，如下所示：

input[type="radio"]:checked + label span {
  box-shadow: 0px 0px #6b54d3;
  top: 4px;
}
这里有一个演示

您必须使用一些javascript来实现这一点。取消选择所有开关，然后选择刚刚单击的开关。您必须使用一些javascript来实现这一点。取消选择所有开关，然后选择刚刚单击的开关。确切地说，我正要发布它：p问题是原始代码有几个HTML错误，例如重复ID等。仅供参考，为了简化事情，我建议删除标记并直接设置样式：确切地说，我正要发布：p问题是原始代码有几个HTML错误，例如重复ID等。仅供参考，为了简化问题，我建议删除标记并直接设置样式：