如何为动态生成的Tabs添加左右滚动切换功能？

Hey there! I see your tab bar is wrapping when there are too many tabs—let's fix that by adding left/right scroll buttons so users can navigate through all tabs without them breaking into new lines. Here's a complete, modified version of your code that implements this feature:

Modified HTML #

<p>Click on the buttons inside the tabbed menu:</p>
<div class="tab">
  <button class="tab-scroll-btn tab-scroll-left" onclick="scrollTabs('left')">&#8249;</button>
  <div class="tab-scroll-container">
    <button class="tablinks active" onclick="return openCity(event,'London')">Jan 2017</button>
    <button class="tablinks" onclick="return openCity(event, 'Paris')">Feb 2017</button>
    <button class="tablinks" onclick="return openCity(event, 'Tokyo')">Mar 2017</button>
    <button class="tablinks" onclick="return openCity(event,'London')">April 2017</button>
    <button class="tablinks" onclick="return openCity(event,'London')">May 2017</button>
    <button class="tablinks" onclick="return openCity(event,'London')">June 2017</button>
    <button class="tablinks" onclick="return openCity(event, 'Paris')">July 2017</button>
    <button class="tablinks" onclick="return openCity(event, 'Tokyo')">August 2017</button>
    <button class="tablinks" onclick="return openCity(event,'London')">September 2017</button>
    <button class="tablinks" onclick="openCity(event,'London')">October 2017</button>
    <button class="tablinks" onclick="openCity(event,'London')">November 2017</button>
    <button class="tablinks" onclick="openCity(event, 'Paris')">December 2017</button>
    <button class="tablinks" onclick="openCity(event, 'Tokyo')">Jan 2018</button>
    <button class="tablinks" onclick="openCity(event,'London')">Feb 2018</button>
  </div>
  <button class="tab-scroll-btn tab-scroll-right" onclick="scrollTabs('right')">&#8250;</button>
</div>
<div id="London" class="tabcontent" style="display:block;">
  <h3>January</h3>
  <p>London is the capital city of England.</p>
</div>
<div id="Paris" class="tabcontent">
  <h3>February</h3>
  <p>Paris is the capital of France.</p>
</div>
<div id="Tokyo" class="tabcontent">
  <h3>March</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>

Updated CSS #

body {
  font-family: Arial;
}
/* Style the tab container */
.tab {
  position: relative;
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}
/* Scroll container for tabs */
.tab-scroll-container {
  display: flex;
  overflow-x: hidden;
  white-space: nowrap;
  scroll-behavior: smooth; /* Adds smooth scrolling animation */
}
/* Style the scroll buttons */
.tab-scroll-btn {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40px;
  border: none;
  outline: none;
  cursor: pointer;
  background-color: rgba(204, 204, 204, 0.7);
  color: #333;
  font-size: 18px;
  transition: background-color 0.3s;
  z-index: 1;
}
.tab-scroll-btn:hover {
  background-color: rgba(204, 204, 204, 1);
}
.tab-scroll-left {
  left: 0;
  border-right: 1px solid #ccc;
}
.tab-scroll-right {
  right: 0;
  border-left: 1px solid #ccc;
}
/* Hide scroll buttons when not needed */
.tab-scroll-btn.hidden {
  display: none;
}
/* Style the buttons inside the tab */
.tab button.tablinks {
  background-color: inherit;
  float: none; /* Remove float since we're using flex */
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
  white-space: nowrap;
}
/* Change background color of buttons on hover */
.tab button.tablinks:hover {
  background-color: #ddd;
}
/* Create an active/current tablink class */
.tab button.tablinks.active {
  background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

Enhanced JavaScript #

function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
  
  // Scroll the active tab into view if it's hidden
  const scrollContainer = document.querySelector('.tab-scroll-container');
  const activeTab = evt.currentTarget;
  scrollContainer.scrollTo({
    left: activeTab.offsetLeft - scrollContainer.offsetLeft + scrollContainer.scrollLeft - 10,
    behavior: 'smooth'
  });
  
  updateScrollButtons(); // Update button visibility after scrolling
  return false;
}

function scrollTabs(direction) {
  const scrollContainer = document.querySelector('.tab-scroll-container');
  const scrollAmount = 200; // Adjust this value to control scroll distance
  
  if (direction === 'left') {
    scrollContainer.scrollBy({ left: -scrollAmount, behavior: 'smooth' });
  } else {
    scrollContainer.scrollBy({ left: scrollAmount, behavior: 'smooth' });
  }
  
  // Update button visibility after scrolling
  setTimeout(updateScrollButtons, 300); // Wait for smooth scroll to finish
}

function updateScrollButtons() {
  const scrollContainer = document.querySelector('.tab-scroll-container');
  const leftBtn = document.querySelector('.tab-scroll-left');
  const rightBtn = document.querySelector('.tab-scroll-right');
  
  // Hide left button when at start
  if (scrollContainer.scrollLeft <= 10) {
    leftBtn.classList.add('hidden');
  } else {
    leftBtn.classList.remove('hidden');
  }
  
  // Hide right button when at end
  const isAtEnd = scrollContainer.scrollLeft >= (scrollContainer.scrollWidth - scrollContainer.clientWidth - 10);
  if (isAtEnd) {
    rightBtn.classList.add('hidden');
  } else {
    rightBtn.classList.remove('hidden');
  }
}

// Initialize button visibility on page load
window.addEventListener('load', updateScrollButtons);
// Update button visibility when window is resized
window.addEventListener('resize', updateScrollButtons);
// Also update while scrolling
document.querySelector('.tab-scroll-container').addEventListener('scroll', updateScrollButtons);

Key Changes Explained #

1. HTML Structure:

   • Added a .tab-scroll-container to wrap all tab buttons, creating a horizontal scrolling area
   • Added left/right scroll buttons that trigger the scrollTabs function
   • Fixed minor typos in your original content for clarity

2. CSS Adjustments:

   • Made the .tab container position: relative to anchor the scroll buttons
   • The .tab-scroll-container uses overflow-x: hidden and white-space: nowrap to keep tabs in a single line, with smooth scrolling animation
   • Styled scroll buttons to sit on the tab bar sides, with hover effects and a hidden state for when scrolling isn't possible
   • Removed float: left from tab buttons since we're using flex in the scroll container

3. JavaScript Additions:

   • scrollTabs: Handles scrolling the tab container left/right by a configurable amount (tweak scrollAmount to adjust scroll distance)
   • updateScrollButtons: Checks scroll position to show/hide buttons only when needed
   • Enhanced openCity: Scrolls the active tab into view if it's off-screen, so users can see their selection
   • Added event listeners to update button visibility on load, resize, and scroll

This setup keeps your original tab functionality intact while adding the scrolling feature. Feel free to adjust styles, scroll distance, or padding to match your design!

内容的提问来源于stack exchange，提问作者Kulkarni