JS怎么做出选项卡

  

    
选项卡1
    
选项卡2
    
选项卡3
  
  

    
选项卡1的内容
    
选项卡2的内容
    
选项卡3的内容
  

2、编写CSS样式

接下来，我们需要为选项卡添加一些基本样式，可以使用CSS选择器为选项卡标题和内容设置样式。

.tabs {
  display: flex;
}
.tabnav {
  liststyle: none;
  display: flex;
}
.tabnavitem {
  cursor: pointer;
  padding: 10px;
}
.tabcontent {
  display: none;
}
.tabpane {
  display: block;
}

3、编写JavaScript代码

我们需要编写JavaScript代码来实现选项卡的切换功能，可以通过监听选项卡标题的点击事件，然后根据点击的标题显示对应的内容。

document.addEventListener('DOMContentLoaded', function () {
  var tabNavItems = document.querySelectorAll('.tabnavitem');
  var tabPanes = document.querySelectorAll('.tabpane');
  tabNavItems.forEach(function (tabNavItem) {
    tabNavItem.addEventListener('click', function () {
      var target = this.getAttribute('datatarget');
      tabNavItems.forEach(function (item) {
        item.classList.remove('active');
      });
      tabPanes.forEach(function (tabPane) {
        tabPane.style.display = 'none';
      });
      this.classList.add('active');
      document.getElementById(target).style.display = 'block';
    });
  });
});

这样，我们就使用JavaScript实现了一个简单的选项卡功能，当点击选项卡标题时，会切换到对应的选项卡内容。

本文标题：JS怎么做出选项卡
当前路径：http://www.shufengxianlan.com/qtweb/news36/506886.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联