如何实现点击链接时显示对应字段并隐藏其他字段

1. 修正HTML语法错误 #

你的HTML代码里有一处语法问题：< li>应改为<li>（空格会导致布局异常），修正后的完整代码如下：

<div>
  <ul class="role" id="role">
    <li class="selected">
      <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 class="block" id="student">
  <input type="text" name="stud" id="Stud" placeholder="Student input">
</div>

<div class="block" id="teacher">
  <input type="text" name="teach" id="Teach" placeholder="Teacher input">
</div>
<div class="block" id="parent">
  <input type="text" name="par" id="par" placeholder="Parent input">
</div>

2. 添加CSS实现默认隐藏与选中样式 #

用CSS设置文本框容器默认隐藏，同时给选中标签添加高亮样式，提升用户体验：

/* 默认隐藏所有文本框容器 */
.block {
  display: none;
}

/* 选中标签的高亮样式 */
.role .selected a {
  font-weight: bold;
  color: #007bff;
}

/* 标签列表布局优化 */
.role {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 10px;
  align-items: center;
}

.role li a {
  text-decoration: none;
  color: #333;
}

3. 编写JavaScript实现切换逻辑 #

通过监听链接点击事件，完成文本框切换与标签状态更新：

// 获取所有标签链接和文本框容器
const tabLinks = document.querySelectorAll('.role a');
const blocks = document.querySelectorAll('.block');

// 为每个链接绑定点击事件
tabLinks.forEach(link => {
  link.addEventListener('click', (e) => {
    e.preventDefault(); // 阻止默认跳转行为
    
    // 隐藏所有文本框
    blocks.forEach(block => block.style.display = 'none');
    
    // 显示当前链接对应的文本框
    const targetId = link.getAttribute('rel');
    document.getElementById(targetId).style.display = 'block';
    
    // 更新标签选中状态
    document.querySelectorAll('.role li').forEach(li => li.classList.remove('selected'));
    link.parentElement.classList.add('selected');
  });
});

功能说明 #

• 初始状态：三个链接可见，所有文本框隐藏
• 点击链接：对应文本框显示，其余文本框隐藏，当前链接变为高亮选中状态
• 切换链接：自动隐藏之前的文本框，显示新的对应文本框，并更新选中标签

内容的提问来源于stack exchange，提问作者saren vs