首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onMarch 04, 2016

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

1、tab切换 on

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").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 相关文章推荐
Javascript倒计时页面跳转实例小结
Sep 11 Javascript
JS实现仿QQ面板的手风琴效果折叠菜单代码
Sep 11 Javascript
详解Layer弹出层样式
Aug 21 Javascript
VUE前端cookie简单操作
Oct 17 Javascript
angularjs实现分页和搜索功能
Jan 03 Javascript
Vue + better-scroll 实现移动端字母索引导航功能
May 07 Javascript
微信小程序画布圆形进度条显示效果
Nov 17 Javascript
微信小程序使用template标签实现五星评分功能
Nov 03 Javascript
Vue源码解析之数组变异的实现
Dec 04 Javascript
了解前端理论：rscss和rsjs
May 23 Javascript
swiper自定义分页器的样式
Sep 14 Javascript
利用js实现简单开关灯代码
Nov 23 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
富碳陨石(1) 酶(1) 数据(1) 嘧啶碱基(2) 火星(2) NASA(1) 大脑(1) 塑料(1) 毅力号(1) 美国航天局(1)
You might like
php中使用session防止用户非法登录后台的方法
2015/01/27 PHP
使用swoole 定时器变更超时未支付订单状态的解决方案
2019/07/24 PHP
在PHP中实现使用Guzzle执行POST和GET请求
2019/10/15 PHP
JavaScript 验证浏览器是否支持javascript的方法小结
2009/05/17 Javascript
Javascript常考语句107条收集
2010/03/09 Javascript
7款吸引人眼球的jQuery/CSS3特效实例分享
2013/04/25 Javascript
转换字符串为json对象的方法详解
2013/11/29 Javascript
js日期对象兼容性的处理方法
2014/01/28 Javascript
Node.js实现批量去除BOM文件头
2014/12/20 Javascript
javascript实现随机读取数组的方法
2015/08/03 Javascript
JavaScript File API文件上传预览
2016/02/02 Javascript
AngularJS中的表单简单入门
2016/07/28 Javascript
详解从Vue.js源码看异步更新DOM策略及nextTick
2017/10/11 Javascript
浅谈Node.js CVE-2017-14849 漏洞分析（详细步骤）
2017/11/10 Javascript
在微信小程序里使用watch和computed的方法
2018/08/02 Javascript
自己动手封装一个React Native多级联动
2018/09/19 Javascript
Javascript中绑定click事件的四种方式介绍
2018/10/26 Javascript
Vue 样式切换及三元判断样式关联操作
2020/08/09 Javascript
npm ci命令的基本使用方法
2020/09/20 Javascript
node.js文件的复制、创建文件夹等相关操作
2021/02/05 Javascript
[02:38]2018DOTA2亚洲邀请赛赛前采访-VGJ.T
2018/04/03 DOTA
python中使用OpenCV进行人脸检测的例子
2014/04/18 Python
Python中使用logging模块打印log日志详解
2015/04/05 Python
python文件操作之目录遍历实例分析
2015/05/20 Python
教你学会使用Python正则表达式
2017/09/07 Python
python调用c++传递数组的实例
2019/02/13 Python
Python后台开发Django的教程详解（启动）
2019/04/08 Python
HTML5高仿微信聊天、微信聊天表情|对话框|编辑器功能
2018/04/23 HTML / CSS
Born鞋子官网：Born Shoes
2017/04/06 全球购物
应届生船舶驾驶求职信
2013/10/19 职场文书
2014年元旦联欢会活动策划方案
2014/02/16 职场文书
作文评语集锦大全
2014/04/23 职场文书
教师党员个人自我剖析材料
2014/09/29 职场文书
名人传读书笔记
2015/06/26 职场文书
Django Paginator分页器的使用示例
2021/06/23 Python
Nginx缓存设置案例详解
2021/09/15 Servers