编程 Javascript

jQuery实现TAB选项卡切换特效简单演示

Posted in Javascript onMarch 04, 2016

本文实例为大家分享jQuery实现TAB选项卡切换特效，供大家参考，具体内容如下

1、tab切换 on

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>jQuery tab切换</title>
 <style type="text/css">
 *{
  margin:0;
  padding:0;
 }
 .wrap{
  margin-left: 50px;
  margin-top: 50px;
 }
 /*清浮动---clearfix*/
 .clearfix {
  *zoom: 1;
 }
 .clearfix:after {
  content: "";
  clear: both;
  display: block;
  height: 0;
  font-size: 0;
  visibility: hidden;
 }
 .blist {
  border:1px solid #d9d9d9;
  width: 275px;
  height: 32px;
 }
 .blist li:first-child{
  border-left: none;
 }
 .blist li{
  list-style: none;
  width: 68px;
  height: 32px;
  border-left:1px solid #d9d9d9;
  font-size: 14px;
  font-family: "楷体";
  line-height: 32px;
  text-align: center;
  float: left;
  /*鼠标样式改变为一个手*/
  cursor: pointer;
  /*字体免选中*/
  -webkit-user-select: none;
 
 }
 .blsit-list{
  width: 275px;
 }
 .blsit-list li{
  list-style: none;
  width: 275px;
  border:1px solid #ccc;
  height: 200px;
  border-top: none;
 }
 .wrap .blist li.active{
  font-weight: bold;
  color: red;
  border-top: 2px solid red;
  position: relative;
  top:-1px;
  height: 31px;
 }
 .blsit-list li:first-child{
  display: block;
 }
 .blsit-list li{
  display: none;
 }
 </style>
</head>
<body>
 <div class="wrap">
  <ul class="blist clearfix">
   <li class="active">电影</li>
   <li>电脑</li>
   <li>冰箱</li>
   <li>空调</li>
  </ul>
  <ul class="blsit-list">
   <li>A</li>
   <li>B</li>
   <li>C</li>
   <li>D</li>
  </ul>
 </div>
 <div class="wrap">
  <ul class="blist clearfix">
   <li class="active">电影</li>
   <li>电脑</li>
   <li>冰箱</li>
   <li>空调</li>
  </ul>
  <ul class="blsit-list">
   <li>A</li>
   <li>B</li>
   <li>C</li>
   <li>D</li>
  </ul>
 </div>
 <div class="wrap">
  <ul class="blist clearfix">
   <li class="active">电影</li>
   <li>电脑</li>
   <li>冰箱</li>
   <li>空调</li>
  </ul>
  <ul class="blsit-list">
   <li>A</li>
   <li>B</li>
   <li>C</li>
   <li>D</li>
  </ul>
 </div>
 <div class="wrap">
  <ul class="blist clearfix">
   <li class="active">电影</li>
   <li>电脑</li>
   <li>冰箱</li>
   <li>空调</li>
  </ul>
  <ul class="blsit-list">
   <li>A</li>
   <li>B</li>
   <li>C</li>
   <li>D</li>
  </ul>
 </div>
 <script type="text/javascript" src="jquery-1.11.3.min.js"></script>
 <script type="text/javascript">
 $(function(){
  $(".blist").on("click","li",function(){
   // 设index为当前点击
   var index = $(this).index();
   // 点击添加样式利用siblings清除其他兄弟节点样式
   $(this).addClass("active").siblings().removeClass("active");
   // 同理显示与隐藏
   $(this).parents(".wrap").find(".blsit-list li").eq(index).show().siblings().hide();
  })
 })
 </script>
</body>
</html>

2、tab切换 mouseenter

效果图：

jQuery实现TAB选项卡切换特效简单演示

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>jQuery tab切换</title>
 <style type="text/css">
 *{
  margin:0;
  padding:0;
 }
 .wrap{
  margin-left: 50px;
  margin-top: 50px;
 }
 /*清浮动---clearfix*/
 .clearfix {
  *zoom: 1;
 }
 .clearfix:after {
  content: "";
  clear: both;
  display: block;
  height: 0;
  font-size: 0;
  visibility: hidden;
 }
 .blist {
  border:1px solid #d9d9d9;
  width: 275px;
  height: 32px;
 }
 .blist li:first-child{
  border-left: none;
 }
 .blist li{
  list-style: none;
  width: 68px;
  height: 32px;
  border-left:1px solid #d9d9d9;
  font-size: 14px;
  font-family: "楷体";
  line-height: 32px;
  text-align: center;
  float: left;
  /*鼠标样式改变为一个手*/
  cursor: pointer;
  /*字体免选中*/
  -webkit-user-select: none;
 
 }
 .blsit-list{
  width: 275px;
 }
 .blsit-list li{
  list-style: none;
  width: 275px;
  border:1px solid #ccc;
  height: 200px;
  border-top: none;
 }
 .wrap .blist li.active{
  font-weight: bold;
  color: red;
  border-top: 2px solid red;
  position: relative;
  top:-1px;
  height: 31px;
 }
 .blsit-list li:first-child{
  display: block;
 }
 .blsit-list li{
  display: none;
 }
 </style>
</head>
<body>
 <div class="wrap">
  <ul class="blist clearfix">
   <li class="active">电影</li>
   <li>电脑</li>
   <li>冰箱</li>
   <li>空调</li>
  </ul>
  <ul class="blsit-list">
   <li>A</li>
   <li>B</li>
   <li>C</li>
   <li>D</li>
  </ul>
 </div>
 <div class="wrap">
  <ul class="blist clearfix">
   <li class="active">电影</li>
   <li>电脑</li>
   <li>冰箱</li>
   <li>空调</li>
  </ul>
  <ul class="blsit-list">
   <li>A</li>
   <li>B</li>
   <li>C</li>
   <li>D</li>
  </ul>
 </div>
 <div class="wrap">
  <ul class="blist clearfix">
   <li class="active">电影</li>
   <li>电脑</li>
   <li>冰箱</li>
   <li>空调</li>
  </ul>
  <ul class="blsit-list">
   <li>A</li>
   <li>B</li>
   <li>C</li>
   <li>D</li>
  </ul>
 </div>
 <div class="wrap">
  <ul class="blist clearfix">
   <li class="active">电影</li>
   <li>电脑</li>
   <li>冰箱</li>
   <li>空调</li>
  </ul>
  <ul class="blsit-list">
   <li>A</li>
   <li>B</li>
   <li>C</li>
   <li>D</li>
  </ul>
 </div>
 <script type="text/javascript" src="jquery-1.11.3.min.js"></script>
 <script type="text/javascript">
 $(function(){
  $(".blist li").on("mouseenter",function(){
   var index = $(this).index();
   $(this).addClass("active").siblings().removeClass("active"); 
   $(this).parents(".wrap").find(".blsit-list li").eq(index).show().siblings().hide();
  })
 })
 </script>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助。

jQuery实现TAB选项卡切换特效简单演示

- Author -

lijiao

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

15个款优秀的 jQuery 图片特效插件推荐

Nov 21 Javascript

左侧是表头的JS表格控件(自写,网上没有的)

Jun 04 Javascript

JS特效实现图片自动播放并可控的效果

Jul 31 Javascript

jQuery实现仿QQ头像闪烁效果的文字闪动提示代码

Nov 03 Javascript

分享经典的JavaScript开发技巧

Nov 21 Javascript

Js遍历键值对形式对象或Map形式的方法

Aug 08 Javascript

EasyUI折叠表格层次显示detailview详解及实例

Dec 28 Javascript

jQuery自动或手动图片切换效果

Oct 11 jQuery

微信小程序云开发如何使用云函数生成二维码

May 18 Javascript

vue实现五子棋游戏

May 28 Javascript

mapboxgl区划标签避让不遮盖实现的代码详解

Jul 01 Javascript

JS实现拖拽元素时与另一元素碰撞检测

Aug 27 Javascript

jquery实现页面常用的返回顶部效果

Mar 04 #Javascript

JavaScript模拟鼠标右键菜单效果

Dec 08 #Javascript

javascript实现移动端上的触屏拖拽功能

Mar 04 #Javascript

基于zepto的移动端轻量级日期插件--date_picker

Mar 04 #Javascript

基于Javascript实现二级联动菜单效果

Mar 04 #Javascript

jquery ajax双击div可直接修改div中的内容

Mar 04 #Javascript

js实现文字滚动效果

Mar 03 #Javascript

You might like

构建简单的Webmail系统

2006/10/09 PHP

基于magic_quotes_gpc与magic_quotes_runtime的区别与使用介绍

2013/04/22 PHP

PHP转换文件夹下所有文件编码的实现代码

2013/06/06 PHP

Javascript异步表单提交，图片上传，兼容异步模拟ajax技术

2010/05/10 Javascript

javascript检测页面是否缩放的小例子

2013/05/16 Javascript

jquery网页元素拖拽插件效果及实现

2013/08/05 Javascript

js动态添加表格数据使用insertRow和insertCell实现

2014/05/22 Javascript

JavaScript File分段上传

2016/03/10 Javascript

jQuery通过ajax请求php遍历json数组到table中的代码(推荐)

2016/06/12 Javascript

js给table赋值的实例代码

2016/10/13 Javascript

JavaScript设置名字输入不合法的实现方法

2017/05/23 Javascript

微信小程序之页面跳转和参数传递的实现

2017/09/29 Javascript

React组件内事件传参实现tab切换的示例代码

2018/07/04 Javascript

jQuery序列化form表单数据为JSON对象的实现方法

2018/09/20 jQuery

使用vue根据状态添加列表数据和删除列表数据的实例

2018/09/29 Javascript

Vue实现一个无限加载列表功能

2018/11/13 Javascript

Vue动态加载异步组件的方法

2018/11/21 Javascript

微信小程序判断页面是否从其他页面返回的实例代码

2019/07/03 Javascript

基于Taro的微信小程序模板消息-获取formId功能模块封装实践

2019/07/15 Javascript

JS 逻辑判断不要只知道用 if-else 和 switch条件判断(小技巧)

2020/05/27 Javascript

[01:34]DAC2018主赛事第四日五佳镜头 Gh巨牙海民助Miracle-死里逃生

2018/04/07 DOTA

Python实现批量读取word中表格信息的方法

2015/07/30 Python

Python 调用Java实例详解

2017/06/02 Python

python决策树之CART分类回归树详解

2017/12/20 Python

Python获取系统所有进程PID及进程名称的方法示例

2018/05/24 Python

python pandas 对series和dataframe的重置索引reindex方法

2018/06/07 Python

利用matplotlib实现根据实时数据动态更新图形

2019/12/13 Python

python实现图书馆抢座(自动预约)功能的示例代码

2020/09/29 Python

优衣库台湾官网：UNIQLO台湾

2019/02/01 全球购物

梅花魂教学反思

2014/04/25 职场文书

2014年党员自我评议对照检查材料

2014/09/20 职场文书

2014党员干部四风问题对照检查材料思想汇报

2014/09/24 职场文书

先进教师事迹材料

2014/12/16 职场文书

2014年企业党建工作总结

2014/12/18 职场文书

暑期辅导班宣传单

2015/07/14 职场文书

毕业欢送晚会主持词

2019/06/25 职场文书