how to make the field visible upon the link click-CodePudding

I'm new to creating webpage. I was stuck in this part, where there are three link (should be visible) and three textbox(should be invisible) as default .

When I click one link only that respective text field should visible. if I click another link previous field should hide and it's respective text field should be visible.

Example If click student link the respective student div should visible then if I click parent then previously student div should hide and parent div must visible. This is my sample code.

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

<div  id="teacher">
  <input type="text" name="teach" id="Teach">
</div>
<div  id="parent">
  <input type="text" name="par" id="par">
</div>

CodePudding user response：

I think this is what you want.

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  id="role">
    <li >
      <a href="#" id="student_tab" rel="student">student</a>
    </li>
    <li >
      <a href="#" id="teacher_tab" rel="teacher">teacher</a>
    </li>

    <li >
      <a href="#;" id="parent_tab" rel="parent">parent</a>
    </li>
  </ul>
</div>

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

CodePudding user response：

Check this out.

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  id="role">
  
    <li >
      <a href="#" id="student_tab" rel="student">student</a>
    </li>
    
    <li >
      <a href="#;" id="teacher_tab" rel="teacher">teacher</a>
    </li>
      
      <li >
        <a href="#" id="parent_tab" rel="parent">parent</a>
      </li>
      
  </ul>
</div>
<div  id="student">
  <input type="text" name="stud" id="Stud" placeholder="student" >
</div>

<div  id="teacher">
  <input type="text" name="teach" id="Teach" placeholder="teacher">
</div>

<div  id="parent">
  <input type="text" name="par" id="par" placeholder="parent">
</div>