如何在单击链接时使字段可见

Question

我是创建网页的新手。我被困在这个部分，默认情况下有三个链接(应该是可见的(和三个文本框(应该是不可见的(。

当我单击一个链接时，只有相应的文本字段应该可见。如果我单击另一个链接，上一个字段应该隐藏，并且它各自的文本字段应该可见。

示例如果单击student链接，相应的studentdiv应该可见，然后如果我单击parent，则之前的studentdiv应该隐藏，parentdiv必须可见。这是我的示例代码。

<div>
<ul class="role" id="role">
<li class="selected">
<a href="#" id="student_tab" rel="student">student</a>
</li>
< li>|</li>
<li class="">
<a href="#" id="teacher_tab" rel="teacher">teacher</a>
</li>
<li>|</li>
<li class="">
<a href="#;" id="parent_tab" rel="parent">parent</a>
</li>
</ul>
</div>
<div class="block" id="student">
<input type="text" name="stud" id="Stud">
</div>
<div class="block" id="teacher">
<input type="text" name="teach" id="Teach">
</div>
<div class="block" id="parent">
<input type="text" name="par" id="par">
</div>

Answer 1

看看这个。

const studentInput = document.getElementById("Stud");
const teacherInput = document.getElementById("Teach");
const parentInput = document.getElementById("par");
const links = document.querySelectorAll('a');
const hideInputs = () => {
const inputs = document.querySelectorAll('input');
inputs.forEach(input => input.classList.remove("active"));
}
const showElement = (e) => {
if(e.target.textContent === "parent") {
hideInputs();
parentInput.classList.add("active");
} else if(e.target.textContent === "student") {
hideInputs();
studentInput.classList.add("active");
} else if(e.target.textContent === "teacher") {
hideInputs();
teacherInput.classList.add("active");
}
}
links.forEach(link => link.addEventListener('click', (e) => showElement(e)))

input {
display: none;
}
input.active {
display: block;
}

<div>
<ul class="role" id="role">

<li class="selected">
<a href="#" id="student_tab" rel="student">student</a>
</li>

<li class="">
<a href="#;" id="teacher_tab" rel="teacher">teacher</a>
</li>

<li class="">
<a href="#" id="parent_tab" rel="parent">parent</a>
</li>

</ul>
</div>
<div class="block" id="student">
<input type="text" name="stud" id="Stud" placeholder="student" class="active">
</div>
<div class="block" id="teacher">
<input type="text" name="teach" id="Teach" placeholder="teacher">
</div>
<div class="block" id="parent">
<input type="text" name="par" id="par" placeholder="parent">
</div>

Answer 2

我想这就是你想要的。

var student = document.getElementById("student_tab");
var teacher = document.getElementById("teacher_tab");
var parent = document.getElementById("parent_tab");
var b_Stud = document.getElementById("Stud");
var b_Teach = document.getElementById("Teach");
var b_par = document.getElementById("par");
function clear() {
b_Stud.style.display = "none";
b_Teach.style.display = "none";
b_par.style.display = "none";
}
function show(type) {
switch (type) {
case "student_tab":
b_Stud.style.display = "block";
break;
case "teacher_tab":
b_Teach.style.display = "block";
break;
case "parent_tab":
b_par.style.display = "block";
break;
default:
break;
}
}
student.addEventListener("click", function(e) {
clear();
show(e.target.id);
});
teacher.addEventListener("click", function(e) {
clear();
show(e.target.id);
});
parent.addEventListener("click", function(e) {
clear();
show(e.target.id);
});

<div>
<ul class="role" id="role">
<li class="selected">
<a href="#" id="student_tab" rel="student">student</a>
</li>
<li class="">
<a href="#" id="teacher_tab" rel="teacher">teacher</a>
</li>
<li class="">
<a href="#;" id="parent_tab" rel="parent">parent</a>
</li>
</ul>
</div>
<div class="block" id="student">
<input type="text" name="stud" id="Stud" placeholder="Stud" />
</div>
<div class="block" id="teacher">
<input type="text" name="teach" id="Teach" placeholder="Teach" />
</div>
<div class="block" id="parent">
<input type="text" name="par" id="par" placeholder="par" />
</div>