关于tab栏无法转换的问题

html代码


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="tab.css">
</head>
<body>
    <div class="tab-container">
        <button class="tab-button active" data-target="#tab1">Tab 1</button>
        <button class="tab-button" data-target="#tab2">Tab 2</button>
        <button class="tab-button" data-target="#tab3">Tab 3</button>
        <button class="tab-button" data-target="#tab4">Tab 4</button>
        <button class="tab-button" data-target="#tab5">Tab 5</button>
        <button class="tab-button" data-target="#tab6">Tab 6</button>
      </div>
      <div class="tab-content-container">
        <div class="tab-content active" id="tab1">
          <h2>Tab 1 content</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, lorem at tristique bibendum, nunc ipsum ultrices lectus, ut malesuada dolor ex ut mauris. Sed auctor purus id augue faucibus, sed bibendum felis malesuada. </p>
        </div>
        <div class="tab-content" id="tab2">
          <h2>Tab 2 content</h2>
          <p>Nulla facilisi. Vivamus convallis, quam eget finibus malesuada, neque purus vehicula tellus, ut semper dolor velit ac nunc. Sed in aliquam justo. Donec placerat dolor ut risus vulputate, vel tincidunt tellus feugiat. </p>
        </div>
        <div class="tab-content" id="tab3">
          <h2>Tab 3 content</h2>
          <p>Etiam euismod, leo eget imperdiet scelerisque, nunc ipsum sagittis ipsum, quis auctor mauris nisl sit amet velit. Donec aliquet, nulla non fringilla tincidunt, diam velit pellentesque velit, sed tristique libero nunc a nibh. </p>
        </div>
        <div class="tab-content" id="tab4">
          <h2>Tab 4 content</h2>
          <p>Aliquam erat volutpat. Cras vel magna eget tellus tempus convallis. Maecenas euismod, massa non eleifend rhoncus, urna augue commodo mauris, vel dignissim velit felis vel nisl. Nam auctor, tortor sit amet fringilla placerat, nibh lectus bibendum nulla, vel fringilla risus enim ut orci. Maecenas tincidunt, elit quis consequat lobortis, libero sapien bibendum risus, ut commodo sapien arcu eu turpis. </p>
        </div>
        <div class="tab-content" id="tab5">
          <h2>Tab 5 content</h2>
          <p>Etiam quis sapien euismod, pulvinar nisi vel, blandit risus. Nullam vel orci id nisl malesuada eleifend. In hac habitasse platea dictumst. Sed vitae est non nunc vestibulum bibendum. Ut ut libero lacus. Suspendisse potenti. Donec euismod, elit in rhoncus hendrerit, sapien elit vestibulum dui, ac blandit augue elit a justo. </p>
        </div>
        <div class="tab-content" id="tab6">
          <h2>Tab 6 content</h2>
          <p>Donec eget felis vel velit tristique tempus. Integer auctor, sapien ut rutrum mattis, magna velit commodo mauris, vel consequat purus purus sit amet sapien. Sed auctor, velit vel ullamcorper mattis, velit dolor bibendum nunc, nec facilisis tellus risus a sem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p>
        </div>
      </div>
</body>
<link rel="stylesheet" href="tab.js">
</html>

css代码


.tab-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ccc;
  }
  
  .tab-button {
    background-color: #fff;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
  }
  
  .tab-button.active {
    background-color: #ccc;
    color: #fff; /* Add color property */
  }
  
  .tab-content {
    display: none;
    padding: 20px;
  }
  
  .tab-content.active {
    display: block;
  }

js代码

```

const tabButtons = document.querySelectorAll('.tab-button');
const tabContents = document.querySelectorAll('.tab-content');

function showTab(tabIndex) {
tabButtons.forEach((button, index) => {
if (index === tabIndex) {
button.classList.add('active');
} else {
button.classList.remove('active');
}
});

tabContents.forEach((content, index) => {
if (index === tabIndex) {
content.classList.add('active');
} else {
content.classList.remove('active');
}
});
}

showTab(0); // Show the first tab by default

tabButtons.forEach((button, index) => {
button.addEventListener('click', () => {
const target = button.getAttribute('data-target');
const tabIndex = Array.from(tabContents).findIndex(content => content.getAttribute('id') === target);
showTab(tabIndex);
});
});

```无法进行tab之间转换

这个地方有问题 , 如果对你有帮助给个采纳哦

img