编程 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 相关文章推荐

js propertychange和oninput事件

Sep 28 Javascript

实现js保留小数点后N位的代码

Nov 13 Javascript

JS判断字符串包含的方法

May 05 Javascript

百度地图api如何使用

Aug 03 Javascript

基于javascript编写简单日历

May 02 Javascript

bootstrap组件之按钮式下拉菜单小结

Jan 19 Javascript

JS验证全角与半角及相互转化的介绍

May 18 Javascript

使用vue2.0创建的项目的步骤方法

Sep 25 Javascript

微信小程序实现左滑动删除效果

Mar 30 Javascript

解决vue项目router切换太慢问题

Jul 19 Javascript

解决父组件将子组件作为弹窗调用只执行一次created的问题

Jul 24 Javascript

Js Snowflake(雪花算法)生成随机ID的实现方法

Aug 26 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

让你同时上传 1000 个文件（二）

2006/10/09 PHP

在Mac OS上自行编译安装Apache服务器和PHP解释器

2015/12/24 PHP

extJs 文本框后面加上说明文字+下拉列表选中值后触发事件

2009/11/27 Javascript

jQuery中after的两种用法实例

2013/07/03 Javascript

利用CSS、JavaScript及Ajax实现图片预加载的三大方法

2017/01/22 Javascript

canvas仿iwatch时钟效果

2017/03/06 Javascript

Vue 2中ref属性的使用方法及注意事项

2017/06/12 Javascript

详解webpack-dev-server 设置反向代理解决跨域问题

2018/04/18 Javascript

基于nodejs res.end和res.send的区别

2018/05/14 NodeJs

详解如何创建并发布一个 vue 组件

2018/11/08 Javascript

ES6的Fetch异步请求的实现方法

2018/12/07 Javascript

详解element-ui日期时间选择器的日期格式化问题

2019/04/08 Javascript

使用VueCli3+TypeScript+Vuex一步步构建todoList的方法

2019/07/25 Javascript

layui 实现表单和文件上传一起传到后台的例子

2019/09/16 Javascript

使用Layui搭建后台管理界面的操作方法

2019/09/20 Javascript

Nodejs实现微信分账的示例代码

2021/01/19 NodeJs

在Python中使用Neo4j数据库的教程

2015/04/16 Python

Django实现发送邮件找回密码功能

2019/08/12 Python

PythonPC客户端自动化实现原理(pywinauto)

2020/05/28 Python

详解用Python爬虫获取百度企业信用中企业基本信息

2020/07/02 Python

Python入门基础之数字字符串与列表

2021/02/01 Python

奥地利顶级内衣丝袜品牌英国站：Wolford英国

2016/08/29 全球购物

英国领先的亚洲旅游专家：Wendy Wu Tours

2018/01/21 全球购物

日本快乐生活方式购物网站：Shop Japan

2018/07/17 全球购物

斯洛伐克最大的婴儿食品和用品网上商店：Feedo.sk

2020/12/21 全球购物

MYSQL基础面试题

2012/05/13 面试题

2013的个人自我评价

2013/12/26 职场文书

教学器材管理制度

2014/01/26 职场文书

劲霸男装广告词改编版

2014/03/21 职场文书

合伙经营协议书

2014/04/18 职场文书

啤酒节策划方案

2014/05/28 职场文书

中秋晚会活动方案

2014/08/31 职场文书

领导班子个人对照检查材料（群众路线）

2014/09/26 职场文书

入党函调证明材料

2015/06/19 职场文书

公司职员入党自传书

2015/06/26 职场文书

二胎满月酒致辞

2015/07/29 职场文书