JQuery 选项卡效果(JS与HTML的分离)

JQuery 选项卡效果(JS与HTML的分离)是一种常见的web网页效果，本攻略将详细讲解JQuery选项卡效果的步骤，并提供两个实例说明。

一、HTML结构

选项卡效果的HTML结构需要包含选项卡列表，以及每个选项卡对应的内容。

<div class="tab">
  <ul class="tab-nav">
    <li class="active"><a href="#tab-1">选项卡1</a></li>
    <li><a href="#tab-2">选项卡2</a></li>
    <li><a href="#tab-3">选项卡3</a></li>
  </ul>

  <div class="tab-content">
    <div class="tab-pane active" id="tab-1">选项卡1的内容</div>
    <div class="tab-pane" id="tab-2">选项卡2的内容</div>
    <div class="tab-pane" id="tab-3">选项卡3的内容</div>
  </div>
</div>

二、CSS样式

为了实现选项卡效果，需要设置选项卡列表样式和每个选项卡内容的样式。其中，“active”类表示当前选中的选项卡。

/* 选项卡列表样式 */
.tab-nav {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tab-nav li {
  display: inline-block;
  margin-right: 10px;
}

.tab-nav li a {
  display: block;
  padding: 5px 10px;
  background-color: #eee;
  color: #333;
  text-decoration: none;
}

.tab-nav li.active a {
  background-color: #333;
  color: #fff;
}

/* 每个选项卡内容的样式 */
.tab-content .tab-pane {
  display: none;
  padding: 10px;
}

.tab-content .active {
  display: block;
}

三、JS实现

为了实现选项卡效果，需要通过JS代码来控制选项卡内容的显示和隐藏。

$(function() {
  // 绑定选项卡菜单点击事件
  $('.tab-nav a').click(function() {
    // 取消所有菜单项的选中状态
    $('.tab-nav li').removeClass('active');
    // 设置当前菜单项选中状态
    $(this).parent().addClass('active');
    // 获取要显示的内容的ID值
    var content_id = $(this).attr('href');
    // 取消所有内容的显示状态
    $('.tab-pane').removeClass('active');
    // 设置当前要显示的内容为显示状态
    $(content_id).addClass('active');
    // 取消a标签的默认动作
    return false;
  });
});

以上代码中，首先通过$(function() {})方法来绑定页面加载完成事件，接着通过‘.tab-nav a’选择器来绑定选项卡菜单点击事件，在点击事件处理函数中，先取消所有菜单项的选中状态，然后设置当前菜单项选中状态，再通过$(this).attr('href')方法来获取要显示的内容的ID值，在$('.tab-pane').removeClass('active');语句中取消所有内容的显示状态，最后通过$(content_id).addClass('active');语句来设置当前要显示的内容为显示状态。

四、两个实例

实例一：基于Bootstrap 4

基于Bootstrap 4的选项卡效果可以借助Bootstrap的样式，实现简单而美观的选项卡效果。以下是一个基于Bootstrap 4的选项卡实例：

<div class="container mt-3">
  <ul class="nav nav-tabs">
    <li class="nav-item">
      <a class="nav-link active" data-toggle="tab" href="#tab-1">选项卡1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#tab-2">选项卡2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#tab-3">选项卡3</a>
    </li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="tab-1">选项卡1的内容</div>
    <div class="tab-pane" id="tab-2">选项卡2的内容</div>
    <div class="tab-pane" id="tab-3">选项卡3的内容</div>
  </div>
</div>

上述代码中，首先引入了Bootstrap 4样式库，接着通过ul.nav.nav-tabs和li.nav-item a.nav-link选择器来实现选项卡列表样式。

在JS实现中，只需要使用Bootstrap提供的data-toggle属性即可实现选项卡切换效果：

$(function() {
  $('.nav-tabs a').click(function() {
    $(this).tab('show');
  });
});

上述代码中，通过$(this).tab('show')语句来显示当前选项卡的内容。

实例二：基于纯CSS和jQuery

以下是一个基于纯CSS和jQuery实现的选项卡实例：

<div class="tabs">
  <ul class="tabs-nav">
    <li class="active"><a href="#tab-1">选项卡1</a></li>
    <li><a href="#tab-2">选项卡2</a></li>
    <li><a href="#tab-3">选项卡3</a></li>
  </ul>
  <div class="tabs-content">
    <div class="tab-pane active" id="tab-1">选项卡1的内容</div>
    <div class="tab-pane" id="tab-2">选项卡2的内容</div>
    <div class="tab-pane" id="tab-3">选项卡3的内容</div>
  </div>
</div>

上述代码中，与前文中的HTML结构类似，采用了“tabs”和“tabs-content”两个样式名，通过“tabs-nav”和“tab-pane”两个样式名，实现选项卡列表和选项卡内容的样式。

在JS代码中，与前文中类似，通过$('.tabs-nav a').click(function() {})语句来实现选项卡切换效果：

$(function() {
  $('.tabs-nav a').click(function() {
    // 取消所有菜单项的选中状态
    $('.tabs-nav li').removeClass('active');
    // 设置当前菜单项选中状态
    $(this).parent().addClass('active');
    // 获取要显示的内容的ID值
    var content_id = $(this).attr('href');
    // 取消所有内容的显示状态
    $('.tab-pane').removeClass('active');
    // 设置当前要显示的内容为显示状态
    $(content_id).addClass('active');
    // 取消a标签的默认动作
    return false;
  });
});

上述代码中，首先通过$('.tabs-nav a')选择器来绑定选项卡菜单点击事件，在点击事件处理函数中，首先取消所有菜单项的选中状态，接着设置当前菜单项选中状态，然后获取要显示的内容的ID值，在$('.tab-pane').removeClass('active');语句中取消所有内容的显示状态，最后通过$(content_id).addClass('active');语句来设置当前要显示的内容为显示状态。