元素作为选项卡内容容器。

  

    
选项卡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://cdysf.com/article/coddhjg.html