Laravel动态标签页（含标题与内容）实现方案咨询

Hey there! 我刚好做过类似的响应式标签页功能，针对你开发产品展示网站的需求，整理了两种实用的实现方案——垂直下拉和水平下拉导航标签页，附带完整的结构、样式和交互逻辑，你可以直接参考：

垂直下拉导航标签页 #

适配场景：页面宽度≤768px时自动切换为下拉菜单；大屏下保持垂直堆叠的标签样式
包含标签：Tab 1、Tab 2、Tab 3

Tab 1：核心HTML结构 #

要让下拉菜单正常工作，得在标签列表上方加一个触发按钮，同时给标签列表设置唯一ID方便控制：

<a href="#" class="nav-tabs-dropdown btn btn-block btn-primary">Tabs</a>
<ul id="nav-tabs-wrapper" class="nav nav-tabs nav-pills nav-stacked wells">
  <!-- 替换成你的Tab项，示例： -->
  <li class="active"><a href="#tab1-content" data-toggle="tab">Tab 1</a></li>
  <li><a href="#tab2-content" data-toggle="tab">Tab 2</a></li>
  <li><a href="#tab3-content" data-toggle="tab">Tab 3</a></li>
</ul>

<!-- 对应的Tab内容容器 -->
<div class="tab-content">
  <div id="tab1-content" class="tab-pane active">
    <!-- Tab 1的内容 -->
  </div>
  <div id="tab2-content" class="tab-pane">
    <!-- Tab 2的内容 -->
  </div>
  <div id="tab3-content" class="tab-pane">
    <!-- Tab 3的内容 -->
  </div>
</div>

Tab 2：内容示例 #

Mauris imperdiet dignissim ante, in efficitur mauris elementum sed. Cras vulputate malesuada magna. Morbi tincidunt eros a dui cursus, vitae dignissim nulla scelerisque. Duis pharetra scelerisque mi vel luctus. Cras eu purus efficitur, blandit nisi id, fringilla nulla.

Tab 3：内容示例 #

Etiam id pharetra quam. Morbi tristique nunc vel sapien dapibus, sit amet imperdiet quam venenatis. Vestibulum et suscipit urna. Suspendisse volutpat quis est eu volutpat. Nulla non tortor venenatis turpis congue aliquet. Vivamus at elit vel massa elementum tempor sit amet sed odio. Nullam placerat, arcu sed ullamcorper ornare, erat erat placerat quam, in feugiat nulla purus in nunc. Maecenas vitae erat auctor, aliquam tellus et, vulputate eros.

水平下拉导航标签页 #

适配场景：页面宽度≤768px时自动切换为下拉菜单；大屏下保持水平排列的标签样式
包含标签：Tab 1、Tab 2、Tab 3

Tab 1：核心HTML结构 #

和垂直版逻辑一致，但要给标签列表加专属类来控制水平布局：

<a href="#" class="nav-tabs-dropdown btn btn-block btn-primary">Tabs</a>
<ul id="nav-tabs-wrapper" class="nav nav-tabs nav-tabs-horizontal">
  <!-- 替换成你的Tab项，示例： -->
  <li class="active"><a href="#tab1-content" data-toggle="tab">Tab 1</a></li>
  <li><a href="#tab2-content" data-toggle="tab">Tab 2</a></li>
  <li><a href="#tab3-content" data-toggle="tab">Tab 3</a></li>
</ul>

<!-- 对应的Tab内容容器（和垂直版一致） -->
<div class="tab-content">
  <div id="tab1-content" class="tab-pane active">
    <!-- Tab 1的内容 -->
  </div>
  <div id="tab2-content" class="tab-pane">
    <!-- Tab 2的内容 -->
  </div>
  <div id="tab3-content" class="tab-pane">
    <!-- Tab 3的内容 -->
  </div>
</div>

Tab 2：内容示例 #

Mauris imperdiet dignissim ante, in efficitur mauris elementum sed. Cras vulputate malesuada magna. Morbi tincidunt eros a dui cursus, vitae dignissim nulla scelerisque. Duis pharetra scelerisque mi vel luctus. Cras eu purus efficitur, blandit nisi id, fringilla nulla.

Tab 3：内容示例 #

Etiam id pharetra quam. Morbi tristique nunc vel sapien dapibus, sit amet imperdiet quam venenatis. Vestibulum et suscipit urna. Suspendisse volutpat quis est eu volutpat. Nulla non tortor venenatis turpis congue aliquet. Vivamus at elit vel massa elementum tempor sit amet sed odio. Nullam placerat, arcu sed ullamcorper ornare, erat erat placerat quam, in feugiat nulla purus in nunc. Maecenas vitae erat auctor, aliquam tellus et, vulputate eros.

必加的交互逻辑（JavaScript） #

光有HTML还不够，得加一段JS来实现下拉菜单的展开/收起，以及移动端的友好交互：

// 下拉菜单触发切换
document.querySelector('.nav-tabs-dropdown').addEventListener('click', function(e) {
  e.preventDefault();
  const tabWrapper = document.getElementById('nav-tabs-wrapper');
  tabWrapper.classList.toggle('show');
});

// 点击标签后自动收起下拉菜单（移动端）
document.querySelectorAll('#nav-tabs-wrapper a').forEach(tabLink => {
  tabLink.addEventListener('click', function() {
    const tabWrapper = document.getElementById('nav-tabs-wrapper');
    if (window.innerWidth <= 768) {
      tabWrapper.classList.remove('show');
    }
  });
});

// 窗口大小变化时自动调整菜单状态
window.addEventListener('resize', function() {
  const tabWrapper = document.getElementById('nav-tabs-wrapper');
  if (window.innerWidth > 768) {
    tabWrapper.classList.remove('show');
  }
});

关键样式补充（CSS） #

最后加上CSS来控制响应式切换和下拉菜单的显示：

/* 默认隐藏下拉按钮，小屏显示 */
.nav-tabs-dropdown {
  display: none;
  margin-bottom: 10px;
}

@media (max-width: 768px) {
  .nav-tabs-dropdown {
    display: block;
  }
  
  #nav-tabs-wrapper {
    display: none;
  }
  
  #nav-tabs-wrapper.show {
    display: block;
  }
  
  /* 水平标签小屏切换为垂直堆叠 */
  .nav-tabs-horizontal {
    flex-direction: column;
    gap: 5px;
  }
  
  /* 垂直标签保持堆叠样式 */
  .nav-stacked.wells {
    width: 100%;
  }
}

这样一套下来，就能实现你需要的动态导航和响应式标签页功能了，要是有细节需要调整，比如样式或者交互逻辑，随时根据你的产品风格修改就行~

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