如何实现Tabs横向排列及左右箭头导航功能？

要实现单行Tabs超出时用左右箭头导航的效果，需要从HTML结构、CSS样式和JavaScript逻辑三部分调整，具体步骤如下：

1. 调整HTML结构 #

给原有的tabs容器套一个父容器用于控制溢出显示，同时添加左右导航按钮：

<div class="tabs-container">
  <button class="scroll-btn scroll-left">&lt;</button>
  <div id="tabs">
    @foreach ($data as $id => $row)
         <div id="version{{$id}}" class="versions @if(Helper::getFeedbackStatus($id) == 1) active @endif">
                {{ $i++ }}.{{ Helper::getFeedbackName($id) }}</div>
    @endforeach
  </div>
  <button class="scroll-btn scroll-right">&gt;</button>
</div>

2. 更新CSS样式 #

修改原有样式实现单行排列、隐藏原生滚动条，同时美化导航按钮：

/* 父容器：控制溢出，相对定位用于放置按钮 */
.tabs-container {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  width: 100%; /* 根据实际页面需求调整宽度 */
}

/* Tabs容器：强制单行排列，启用横向滚动 */
#tabs {
  display: flex;
  flex-wrap: nowrap; /* 取消自动换行 */
  overflow-x: auto;
  scroll-behavior: smooth; /* 平滑滚动过渡 */
  scrollbar-width: none; /* 隐藏Firefox原生滚动条 */
  flex-grow: 1;
}

/* 隐藏Chrome/Safari原生滚动条 */
#tabs::-webkit-scrollbar {
  display: none;
}

/* Tab项样式：保留原有设计，优化换行与间距 */
#tabs div {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  color: white;
  padding: 5px 10px;
  cursor: pointer;
  transform-origin: center;
  background-color: #6a6e94;
  white-space: nowrap; /* 防止Tab文字换行 */
  margin-right: 2px; /* 添加Tab间间距 */
  min-width: 80px; /* 避免Tab过窄，可按需调整 */
}

.active, #tabs div:hover {
  box-shadow: 2px 2px 5px black;
  background-color: var(--default_color)!important;
}

/* 导航按钮样式 */
.scroll-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(106, 110, 148, 0.8);
  color: white;
  border: none;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  cursor: pointer;
  display: none; /* 默认隐藏，由JS控制显示时机 */
  z-index: 10;
}

.scroll-left {
  left: 10px;
}

.scroll-right {
  right: 10px;
}

.scroll-btn:hover {
  background-color: var(--default_color);
}

3. 添加JavaScript逻辑 #

实现按钮滚动控制、按钮显示/隐藏判断，以及Tab切换时的自动滚动定位：

const tabsContainer = document.getElementById('tabs');
const scrollLeftBtn = document.querySelector('.scroll-left');
const scrollRightBtn = document.querySelector('.scroll-right');
const tabItems = document.querySelectorAll('.versions');

// 判断是否显示导航按钮
function checkScrollButtons() {
  scrollLeftBtn.style.display = tabsContainer.scrollLeft > 0 ? 'block' : 'none';
  scrollRightBtn.style.display = tabsContainer.scrollLeft < (tabsContainer.scrollWidth - tabsContainer.clientWidth) ? 'block' : 'none';
}

// 左侧按钮滚动逻辑
scrollLeftBtn.addEventListener('click', () => {
  tabsContainer.scrollBy({ left: -200, behavior: 'smooth' });
});

// 右侧按钮滚动逻辑
scrollRightBtn.addEventListener('click', () => {
  tabsContainer.scrollBy({ left: 200, behavior: 'smooth' });
});

// 滚动时实时更新按钮状态
tabsContainer.addEventListener('scroll', checkScrollButtons);

// 点击Tab时自动滚动到可视区域
tabItems.forEach(tab => {
  tab.addEventListener('click', () => {
    tab.scrollIntoView({ behavior: 'smooth', inline: 'center' });
    // 如需动态切换active类，可在此添加相关逻辑
  });
});

// 页面加载时初始化按钮状态
window.addEventListener('load', checkScrollButtons);

关键说明 #

• 用flex-wrap: nowrap强制Tabs单行排列，overflow-x: auto实现横向滚动
• 隐藏原生滚动条，用自定义按钮提供更友好的导航方式
• scroll-behavior: smooth实现平滑滚动的流畅体验
• 通过JS判断滚动位置，动态显示/隐藏左右按钮，避免无意义的交互元素
• 点击Tab时自动将其滚动到可视区域，提升用户操作体验

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