jsp页面tab效果

<div id="tabs">
  <ul>
    <li><a href="#tab1">Tab 1</a></li>
    <li><a href="#tab2">Tab 2</a></li>
    <li><a href="#tab3">Tab 3</a></li>
  </ul>
  <div id="tab1">
    <p>Content for Tab 1</p>
  </div>
  <div id="tab2">
    <p>Content for Tab 2</p>
  </div>
  <div id="tab3">
    <p>Content for Tab 3</p>
  </div>
</div>

#tabs ul {
  list-style-type: none;
  padding: 0;
}
#tabs ul li {
  display: inline-block;
}
#tabs ul li a {
  text-decoration: none;
  padding: 10px;
  background-color: #f1f1f1;
  color: black;
}
#tabs ul li a.active {
  background-color: #ccc;
}
#tabs div {
  display: none;
}
#tabs div.active {
  display: block;
}

document.addEventListener('DOMContentLoaded', function() {
  const tabs = document.querySelectorAll('#tabs ul li a');
  const tabContents = document.querySelectorAll('#tabs div');

  tabs.forEach(tab => {
    tab.addEventListener('click', function(e) {
      e.preventDefault();
      const target = this.getAttribute('href');

      tabs.forEach(t => t.classList.remove('active'));
      tabContents.forEach(content => content.classList.remove('active'));

      this.classList.add('active');
      document.querySelector(target).classList.add('active');
    });
  });

  // 默认激活第一个tab
  tabs[0].classList.add('active');
  tabContents[0].classList.add('active');
});