jquery实现初次打开有动画效果的网页TAB切换代码

下面是详细的攻略：

需求分析

需要用jquery实现一个带有切换动画效果的网页TAB切换功能。具体要求如下：

• 初次加载页面时，选中第一个TAB页面，其他TAB页面隐藏。
• 点击某个TAB按钮时，该按钮对应的TAB页面显示，并向左边滑动展示。
• 再次点击该TAB按钮时，该页面向右边滑动隐藏。

代码实现

实现思路：

• 通过jquery选择器找到所有的TAB按钮和页面元素，给每个TAB按钮添加click事件。
• 切换页面时，先将当前显示的页面向右边滑动隐藏，再将点击的目标页面向左边滑动展示。

以下是两个示例：

示例一

HTML结构：

<div class="tab">
  <div class="tab-buttons">
    <button class="active" data-target="tab-page-1">页面1</button>
    <button data-target="tab-page-2">页面2</button>
    <button data-target="tab-page-3">页面3</button>
  </div>
  <div class="tab-pages">
    <div id="tab-page-1" class="active">这是页面1</div>
    <div id="tab-page-2">这是页面2</div>
    <div id="tab-page-3">这是页面3</div>
  </div>
</div>

CSS样式：

.tab {
  width: 500px;
  height: 300px;
  margin: 50px auto;
  border: 1px solid #ccc;
  position: relative;
}

.tab-buttons {
  position: absolute;
  left: 0;
  top: 0;
}

.tab-buttons button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #eee;
  border: none;
  cursor: pointer;
  margin-right: 10px;
}

.tab-pages {
  position: absolute;
  left: 0;
  top: 40px;
  width: 100%;
  height: 260px;
  overflow: hidden;
}

.tab-pages div {
  width: 100%;
  height: 260px;
  position: absolute;
  left: 0;
  top: 0;
  display: none;
  opacity: 0;
  transition: all 0.2s ease-in;
}

.tab-pages div.active {
  display: block;
  opacity: 1;
}

JS代码：

$(function() {
  // 初始默认选中第一个页面
  $('.tab-pages div').eq(0).addClass('active').css('display', 'block').css('opacity', 1);

  $('.tab-buttons button').click(function() {
    // 获取目标页面ID
    var target = $(this).data('target');
    // 判断目标页面是否已经显示，如果已经显示则不进行切换
    if ($('#'+target).hasClass('active')) {
      return false;
    }

    // 隐藏当前显示的页面
    $('.tab-pages div.active').animate({left: '100%', opacity: 0}, 200, function() {
      $(this).removeClass('active').css('display', 'none');
    });

    // 显示目标页面
    $('#' + target).addClass('active').css('display', 'block').animate({left: '0', opacity: 1}, 200);
  });
});

示例二

HTML结构：

<div class="tab">
  <div class="tab-buttons">
    <button class="active" data-target="tab-page-1">页面1</button>
    <button data-target="tab-page-2">页面2</button>
    <button data-target="tab-page-3">页面3</button>
  </div>
  <div class="tab-pages">
    <div id="tab-page-1" class="active">这是页面1</div>
    <div id="tab-page-2">这是页面2</div>
    <div id="tab-page-3">这是页面3</div>
  </div>
</div>

CSS样式：

.tab {
  width: 500px;
  height: 300px;
  margin: 50px auto;
  border: 1px solid #ccc;
  position: relative;
}

.tab-buttons {
  position: absolute;
  left: 0;
  top: 0;
}

.tab-buttons button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #eee;
  border: none;
  cursor: pointer;
  margin-right: 10px;
}

.tab-pages {
  position: absolute;
  left: 0;
  top: 40px;
  width: 100%;
  height: 260px;
  overflow: hidden;
}

.tab-pages div {
  width: 100%;
  height: 260px;
  position: absolute;
  left: 0;
  top: 0;
  display: none;
}

.tab-pages div.active {
  display: block;
}

JS代码：

$(function() {
  // 初始默认选中第一个页面
  $('.tab-pages div').eq(0).addClass('active').css('opacity', 1);

  $('.tab-buttons button').click(function() {
    // 获取目标页面ID
    var target = $(this).data('target');
    // 判断目标页面是否已经显示，如果已经显示则不进行切换
    if ($('#'+target).hasClass('active')) {
      return false;
    }

    // 隐藏当前显示的页面
    $('.tab-pages div.active').fadeOut(200).removeClass('active');

    // 显示目标页面
    $('#' + target).fadeIn(200).addClass('active');
  });
});

总结

以上就是jquery实现初次打开有动画效果的网页TAB切换代码的攻略。可以根据具体需求选择不同的效果，通过动画的方式来提升用户体验。