前端：html实现页面切换、顶部标签栏（可删、可切换，点击左侧超链接出现标签栏）

这篇文章距离上次修改已过191天，其中的内容可能已经有所变动。

以下是一个简单的HTML页面示例，其中包含了可以进行页面切换的顶部标签栏。标签栏可以根据左侧菜单的超链接进行删除和切换。




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>页面切换示例</title>
<style>
  body { font-family: Arial, sans-serif; }
  .sidenav {
    height: 100%;
    width: 200px;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    padding: 60px 0;
  }
  .sidenav a {
    padding: 6px 8px 6px 16px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
  }
  .sidenav a:hover {
    color: #f1f1f1;
  }
  .main {
    margin-left: 200px; /* Same as width of sidenav */
    padding: 0px 10px;
  }
  @media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
  }
  @media screen and (max-width: 767px) {
    .sidenav {
      height: auto;
      padding: 15px;
    }
    .sidenav a {
      display: block;
      text-decoration: none;
    }
  }
  .tab-content {
    display: none;
  }
  .active-tab {
    display: block;
  }
</style>
</head>
<body>
 
<div class="sidenav">
  <a href="#home" class="active-tab">首页</a>
  <a href="#news">新闻</a>
  <a href="#contact">联系</a>
  <a href="#about">关于</a>
</div>
 
<div class="main">
  <div id="home" class="tab-content active-tab">
    <h2>首页内容</h2>
    <p>这里是首页的详细内容。</p>
  </div>
 
  <div id="news" class="tab-content">
    <h2>新闻内容</h2>
    <p>这里是新闻的详细内容。</p>
  </div>
 
  <div id="contact" class="tab-content">
    <h2>联系方式</h2>
    <p>这里是联系方式的详细内容。</p>
  </div>
 
  <div id="about" class="tab-content">
    <h2>关于我们</h2>
    <p>这里是关于我们的详细内容。</p>
  </div>
 
  <script>
    // 使用 JavaScript 来处理标签的切换
    let tabs = document.querySelectorAll('.sidenav a');
    for (let tab of tabs) {
      tab.addEventListener('click', function() {
        // 移除所有标签的活跃类
        document.querySelectorAll('.active-tab').forEach(function(tabContent) {
          tabContent.classList.remove('active-tab');
        });
 
        // 添加当前点击的标签的活跃类
        document.getElementById(tab.getAttribute('href').substring(1)).classList.add('active-tab');
 
        // 阻止链接默认行为
        event.preventDefault();
      });
    }
  </script>
</div>
 
</body>
</html>

在这个示例中，

前端：html实现页面切换、顶部标签栏（可删、可切换，点击左侧超链接出现标签栏）

评论已关闭

推荐阅读