点亮菜单与Tab页效果：基于Bootstrap Ace模板的完美优化

前端

2023-09-07 18:30:36

大家好，欢迎来到我们的 JS 组件系列。在上一篇文章中，我们分享了如何使用 Bootstrap Ace 模板实现菜单和 Tab 页效果。感谢各位园友的支持和反馈！

今天，我们将更进一步，对这些效果进行优化，让它们在实际项目中也能大放异彩。

首先，让我们回顾一下上一篇文章中的代码。我们使用了 Ace 模板提供的菜单和 Tab 页组件，并添加了一些 JS 代码来实现交互效果。但是，代码中还存在一些不足之处，比如：

菜单项未高亮显示
Tab 页切换时没有动画效果
无法在 Tab 页之间切换

在今天的优化中，我们将解决这些问题，并进一步增强组件的功能。

菜单高亮

要让菜单项在选中时高亮显示，我们需要在 JS 代码中添加如下代码：

$(document).ready(function() {
  // 监听菜单项点击事件
  $(".nav-tabs a").on("click", function() {
    // 移除所有菜单项的高亮状态
    $(".nav-tabs a").removeClass("active");
    // 为当前点击的菜单项添加高亮状态
    $(this).addClass("active");
  });
});

这段代码使用 jQuery 监听了菜单项的点击事件，并在点击时移除所有菜单项的高亮状态，然后为当前点击的菜单项添加高亮状态。

Tab 页动画

要为 Tab 页切换添加动画效果，我们需要在 CSS 中添加如下代码：

.tab-content {
  transition: opacity 0.5s;
}

这段代码设置了 Tab 页内容区的过渡效果，在切换 Tab 页时会产生平滑的淡入淡出效果。

Tab 页切换

要让 Tab 页之间可以切换，我们需要修改 HTML 结构，将 Tab 页内容区移动到 Tab 页标题下方。同时，还需要修改 JS 代码，将 Tab 页标题的点击事件改为切换 Tab 页内容区。

修改后的 HTML 结构如下：

<ul class="nav nav-tabs">
  <li><a href="#tab1" data-toggle="tab">Tab 1</a></li>
  <li><a href="#tab2" data-toggle="tab">Tab 2</a></li>
</ul>
<div class="tab-content">
  <div id="tab1" class="tab-pane fade in active">Tab 1 内容</div>
  <div id="tab2" class="tab-pane fade">Tab 2 内容</div>
</div>

修改后的 JS 代码如下：

$(document).ready(function() {
  // 监听 Tab 页标题点击事件
  $(".nav-tabs a").on("click", function() {
    // 获取当前点击的 Tab 页标题
    var $tab = $(this);
    // 获取当前点击的 Tab 页内容区
    var $tabContent = $($tab.attr("href"));
    // 移除所有 Tab 页内容区的显示状态
    $(".tab-content > div").removeClass("active");
    // 为当前点击的 Tab 页内容区添加显示状态
    $tabContent.addClass("active");
  });
});