基于jquery的9行js轻松实现tab控件示例

下面是详细讲解“基于jquery的9行js轻松实现tab控件示例”的完整攻略：

概述

tab控件是常见的网页交互组件之一，其能够使得网页内容通过标签页方式进行分组展示，用户可以通过点击对应的标签页来查看相应的内容。本攻略将讲解如何基于jQuery实现一个简单的tab控件。

思路

• 用户点击标签页时，对应的内容区域显示，其他内容区域隐藏
• 标签页与对应内容可以通过数据关联来进行匹配
• 点击不同的标签页时，需要修改对应标签页和内容项的样式

实现

以下是实现tab控件的9行代码示例：

$(".tab li").click(function () {
  $(this).addClass("active").siblings().removeClass("active");
  var index = $(this).index();
  $(".content .item").eq(index).addClass("active").siblings().removeClass("active");
});

这段代码中，.tab表示标签页区域，.content表示内容展示区域，通过点击.tab li来触发点击事件。接下来逐行解释代码的作用：

• $(this).addClass("active").siblings().removeClass("active"); 点击当前标签，为其添加.active样式类，同时移除它的同级元素（其他标签）的.active样式类。
• var index = $(this).index(); 点击当前标签，获取其在同级的索引位置。
• $(".content .item").eq(index).addClass("active").siblings().removeClass("active");根据索引值，显示.content区域下相应位置的.item元素，同时移除其他同级元素的.active样式类。

示例说明

以下示例展示了如何将tab控件应用于项目开发中：

1. tab控件在新闻内容中的应用

假设现在需要为新闻站点添加一个标签页切换功能，支持通过分组方式展示不同类型的新闻。通过使用tab控件，可以很容易地实现这个功能。具体来说，可以将不同类型的新闻内容放置在单独的div容器中，并使用.tab类封装。然后在单击tab标签时，使用jQuery将对应的新闻内容区域显示出来。

<ul class="tab">
  <li>国内</li>
  <li>国际</li>
  <li>体育</li>
  <li>科技</li>
</ul>
<div class="content">
  <div class="item">
    <h3>国内新闻</h3>
    <p>中国证监会发布了最新的A股上市规则，引发广泛关注。</p>
  </div>
  <div class="item">
    <h3>国际新闻</h3>
    <p>美国总统特朗普发表重要讲话，表示将继续推行“美国优先”政策。</p>
  </div>
  <div class="item">
    <h3>体育新闻</h3>
    <p>中国足协发布新的联赛管理规定，引起社会广泛讨论。</p>
  </div>
  <div class="item">
    <h3>科技新闻</h3>
    <p>苹果公司发布了最新款iPhone手机，引领全球手机新潮流。</p>
  </div>
</div>

使用上述HTML代码和前述实现代码就可以轻松实现新闻站点中的tab控件：

$(".tab li").click(function () {
  $(this).addClass("active").siblings().removeClass("active");
  var index = $(this).index();
  $(".content .item").eq(index).addClass("active").siblings().removeClass("active");
});

1. tab控件在商品分类中的应用

另一个示例是商品分类和商品详情的展示。假设需要为一个购物网站做商品分类和展示页面，使用tab控件来展示不同的商品分类和对应的商品详情。具体来说，可以为每个商品分类创建一个标签页，并在点击标签页时展示该分类下的商品详情。

<ul class="tab">
  <li>数码产品</li>
  <li>家用电器</li>
  <li>个护化妆</li>
  <li>运动户外</li>
</ul>
<div class="content">
  <div class="item">
    <h3>数码产品</h3>
    <ul>
      <li>iPhone手机</li>
      <li>ipad平板电脑</li>
      <li>小米智能手环</li>
    </ul>
  </div>
  <div class="item">
    <h3>家用电器</h3>
    <ul>
      <li>电饭煲</li>
      <li>洗衣机</li>
      <li>电视机</li>
    </ul>
  </div>
  <div class="item">
    <h3>个护化妆</h3>
    <ul>
      <li>口红</li>
      <li>眼影</li>
      <li>洗面奶</li>
    </ul>
  </div>
  <div class="item">
    <h3>运动户外</h3>
    <ul>
      <li>滑雪板</li>
      <li>帐篷</li>
      <li>登山鞋</li>
    </ul>
  </div>
</div>

使用上述HTML代码和前述实现代码就可以轻松实现商品分类中的tab控件：

$(".tab li").click(function () {
  $(this).addClass("active").siblings().removeClass("active");
  var index = $(this).index();
  $(".content .item").eq(index).addClass("active").siblings().removeClass("active");
});

到这里，基于jquery实现tab控件的完整攻略已经讲解完毕。