JS tab 切换不同分类的信息

最新推荐文章于 2024-10-01 20:12:28 发布

小小优化师 anny

最新推荐文章于 2024-10-01 20:12:28 发布

阅读量105

点赞数 1

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/q28000/article/details/139472461

版权

JS tab 切换不同分类的信息测试可用

<!DOCTYPE html>
<html>
<head>
  <title>Ajax Tab 切换</title>
 
    

<script>


 document.addEventListener('DOMContentLoaded', function() {
  const tabs = document.querySelectorAll('.tab-btn');
  const contents = document.querySelectorAll('.content');

  tabs.forEach((tab) => {
    tab.addEventListener('click', function(event) {
      // 阻止默认行为（如果有链接的话）
      event.preventDefault();

      // 获取被点击的按钮对应的data-tab值
      const targetTab = event.target.getAttribute('data-tab');

      // 隐藏所有内容
      contents.forEach((content) => {
        content.classList.remove('active');
      });

      // 移除所有按钮的active类
      tabs.forEach((btn) => {
        btn.classList.remove('active');
      });

      // 显示对应的内容并激活对应的按钮
      document.getElementById(targetTab).classList.add('active');
      event.target.classList.add('active');
    });
  });
});

</script>

<style type="text/css">

.tab-nav .tab-btn {
  margin-right: 5px;
}
.tab-nav .tab-btn.active {
  background-color: #4CAF50; /* 活动状态背景色 */
  color: white;
}
.content {
  display: none; /* 默认隐藏所有内容 */
}
.content.active {
  display: block; /* 显示活动内容 */
}

</style>
</head>
<body>



<div class="tab-container">
  <div class="tab-nav">
    <button class="tab-btn active" data-tab="tab1">分类1</button>
    <button class="tab-btn" data-tab="tab2">分类2</button>
    <button class="tab-btn" data-tab="tab3">分类3</button>
  </div>
  <div class="tab-content">
    <div class="content active" id="tab1">这是分类1的内容。</div>
    <div class="content" id="tab2">这是分类2的内容。</div>
    <div class="content" id="tab3">这是分类3的内容。</div>
  </div>
</div>


 


</body>
</html>