点我切换内容! 通过左侧导航栏，轻松掌控右侧内容

2023-06-30 02:39:05

轻松实现左侧导航栏切换右侧内容

在现代网站和应用程序中，用户友好性至关重要。切换右侧内容的功能可提供无缝导航和卓越的用户体验。今天，我们将深入探讨如何使用 HTML、JS 和 iFrame 轻松实现此功能。

准备工作

首先，我们创建基础的 HTML 结构：

<body>
  <nav>
    <ul>
      <li><a href="#">首页</a></li>
      <li><a href="#">关于我们</a></li>
      <li><a href="#">产品</a></li>
      <li><a href="#">联系我们</a></li>
    </ul>
  </nav>
  <div id="content">
    <!-- 右侧内容区域 -->
  </div>
</body>

<nav> 标签包含左侧导航栏，<ul> 包含菜单项。<div id="content"> 将容纳动态内容。

添加 JS 代码

接下来，我们引入 JavaScript 来处理导航栏点击：

document.querySelectorAll('nav a').forEach((item) => {
  item.addEventListener('click', (event) => {
    const href = event.target.href;
    const content = document.getElementById('content');
    content.innerHTML = `<iframe src="${href}" width="100%" height="100%"></iframe>`;
  });
});

这段代码监听导航栏链接的点击。当点击时，它会获取链接地址并加载页面内容到右侧的 iFrame 中。

代码示例

完整代码示例如下：

HTML

<nav>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</nav>
<div id="content">
  <!-- 右侧内容区域 -->
</div>

document.querySelectorAll('nav a').forEach((item) => {
  item.addEventListener('click', (event) => {
    const href = event.target.href;
    const content = document.getElementById('content');
    content.innerHTML = `<iframe src="${href}" width="100%" height="100%"></iframe>`;
  });
});