单选按钮:告诉我怎么做

Question

我不是一个程序员，我试图做一些爱好的代码。现在我不想打扰你们，但为了简单一点:我在一个网站上做一个角色扮演，每个角色都有一个"空格";将HTML和CSS编写的代码作为模板。我不知道你是否知道tumbrl，但是我通过搜索"角色扮演"，"tabilla"等，找到了许多代码。我看到他们中的大多数人使用单选按钮，就像链接到自己一样(从a到b，等等)，但我不明白如何做到这一点。这是我发现的一个例子:

<input type="radio" id="cncl-1" name="cncl_group" checked="checked" />
<input type="radio" id="cncl-2" name="cncl_group" />
<input type="radio" id="cncl-3" name="cncl_group" />
<input type="radio" id="cncl-4" name="cncl_group" />
<input type="radio" id="cncl-5" name="cncl_group" />
<div class="cncl-tabs">
<div class="cncl-content">

——其他代码太长-

<div class="cncl-labels">
<label for="cncl-1">i</label>
<label for="cncl-2">ii</label>
<label for="cncl-3">iii</label>
<label for="cncl-4">vi</label>
<label for="cncl-5">v</label>
</div>

和CSS就像:

.conciliate input[type="radio"]:nth-of-type(1):checked ~ .cncl-tabs .cncl-content div:nth-child(1),
.conciliate input[type="radio"]:nth-of-type(2):checked ~ .cncl-tabs .cncl-content div:nth-child(2),
.conciliate input[type="radio"]:nth-of-type(3):checked ~ .cncl-tabs .cncl-content div:nth-child(3),
.conciliate input[type="radio"]:nth-of-type(4):checked ~ .cncl-tabs .cncl-content div:nth-child(4),
.conciliate input[type="radio"]:nth-of-type(5):checked ~ .cncl-tabs .cncl-content div:nth-child(5) {
display: block;
animation: aparecer 1.5s;
}

Answer 1

的例子,我为你使用单选按钮,但是当然,你可以使用任何元素而不是单选按钮,像正常的按钮或div,在这里重要的是风格和js函数,通过隐藏的元素和风格了js让他们通过点击特定元素的id发送你想展示区域,这不是一个单选按钮的属性,单选的作用是它只允许你从表单中选择一个字段然后当你取每个单选的值时你会从被选元素中得到一个true

function changepage(id) {
clean();
document.getElementById(id).style.display = 'block';
}
function clean() {
let z1 = document.getElementById('zone1');
let z2 = document.getElementById('zone2');
let z3 = document.getElementById('zone3');
z1.style.display = 'none';
z2.style.display = 'none';
z3.style.display = 'none';
}

.cont {
height: 60px;
display: flex;
justify-content: center;
align-items: center;
background-color: #cad2ff;
width: 100%;
}

.rowCont {
display: flex;
justify-content: center;
align-items: center;
height: 23px;
background-color: #f0f0f0;
width: 100%;
}

input {
margin-right: 10px;
height: 49px;
}

#zone1,
#zone2,
#zone3 {
display: none;
}

<div class="cont">
<div id="zone1">
a
</div>
<div id="zone2">
b
</div>
<div id="zone3">
c
</div>
</div>
<div class="rowCont">
<label for="1">page 1</label>
<input onclick="changepage('zone1')" id="1" type="radio" name="page">
<label for="2">page 2</label>
<input onclick="changepage('zone2')" id="2" type="radio" name="page">
<label for="3">page 3</label>
<input onclick="changepage('zone3')" id="3" type="radio" name="page">
</div>