如何用JavaScript/jQuery按需渲染导航、搜索及表单等DOM元素？

我有一个包含导航面板、搜索栏和添加用户表单的模板，想要按需控制DOM渲染。初始状态只显示导航面板，用户点击对应选项后，再渲染搜索栏、用户列表或添加用户表单。请问怎么用JavaScript/jQuery实现？

我的模板代码：

<div>
  <ul id="navigation">
    <li class="show">Show</li>
    <li class="search">Search</li>
    <li class="add">Add</li>
  </ul>
</div>
<div class="search-section">
  <h1>Search Contacts</h1>
  <form id="searchInfo">
    <input type="text" name="name" />
    <input type="submit"></input>
  </form>
</div>
<div class="searchMatch">
    <ul class="searchMatchList">
    </ul>
</div>
<div class="add-section">
  <h1>Add Contacts</h1>
  <form id="contactInfo">
    <input type="text" id="name" name="name" />
    <input type="text" id="surname" name="surname" />
    <input type="text" id="phnNumber" name="phnNumber" />
    <input type="text" id="address" name="address" />
    <input type="submit"></input>
  </form>
</div>
<div class="showContacts">
    <ul class="contactsList">
    </ul>
</div>

第一步：默认隐藏非导航区域 #

先通过CSS设置初始状态，只保留导航面板可见：

.search-section, .searchMatch, .add-section, .showContacts {
  display: none;
}

方式一：原生JavaScript实现 #

// 获取所有导航项和功能区域元素
const navItems = document.querySelectorAll('#navigation li');
const searchSection = document.querySelector('.search-section');
const searchMatch = document.querySelector('.searchMatch');
const addSection = document.querySelector('.add-section');
const showContacts = document.querySelector('.showContacts');

// 绑定导航点击事件
navItems.forEach(item => {
  item.addEventListener('click', () => {
    // 先隐藏所有功能区域
    hideAllSections();
    
    // 根据点击的导航项显示对应区域
    switch(item.className) {
      case 'show':
        showContacts.style.display = 'block';
        break;
      case 'search':
        searchSection.style.display = 'block';
        searchMatch.style.display = 'block';
        break;
      case 'add':
        addSection.style.display = 'block';
        break;
    }
    
    // 可选：给当前选中的导航项加高亮
    navItems.forEach(nav => nav.classList.remove('active'));
    item.classList.add('active');
  });
});

// 封装隐藏所有区域的工具函数
function hideAllSections() {
  searchSection.style.display = 'none';
  searchMatch.style.display = 'none';
  addSection.style.display = 'none';
  showContacts.style.display = 'none';
}

方式二：jQuery实现 #

jQuery语法更简洁，适合快速开发场景：

// 初始隐藏所有非导航区域
$('.search-section, .searchMatch, .add-section, .showContacts').hide();

// 绑定导航点击事件
$('#navigation li').click(function() {
  // 隐藏所有功能区域
  $('.search-section, .searchMatch, .add-section, .showContacts').hide();
  
  // 根据当前点击项的类名显示对应区域
  const currentClass = $(this).attr('class');
  switch(currentClass) {
    case 'show':
      $('.showContacts').show();
      break;
    case 'search':
      $('.search-section').show();
      $('.searchMatch').show();
      break;
    case 'add':
      $('.add-section').show();
      break;
  }
  
  // 可选：给当前选中的导航项加高亮
  $('#navigation li').removeClass('active');
  $(this).addClass('active');
});

额外优化 #

可以给选中的导航项添加高亮样式，提升用户体验：

#navigation li.active {
  color: #007bff;
  font-weight: bold;
  border-bottom: 2px solid #007bff;
}

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