首页
所有分类
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 相关文章推荐
脚本收藏iframe
Jul 21 Javascript
Javascript insertAfter() 实现函数代码
Oct 12 Javascript
Jquery的hover方法让鼠标经过li时背景变色
Sep 06 Javascript
JavaScript获取XML数据附示例截图
Mar 05 Javascript
jQuery获得指定元素坐标的方法
Apr 14 Javascript
js canvas实现擦除动画
Jul 16 Javascript
Bootstrap按钮组实例详解
Jul 03 Javascript
angular $watch 一个变量的变化(实例讲解)
Aug 02 Javascript
JavaScript实现随机数生成器（去重）
Oct 13 Javascript
React.js绑定this的5种方法(小结)
Jun 05 Javascript
JavaScript基于面向对象实现的无缝滚动轮播示例
Jan 17 Javascript
利用JavaScript为句子加标题的3种方法示例
Jan 05 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) queue(1) TaiShan(1) RecyclerView(1) 云服务器(1) 九宫格(5) 内存池(1) Simhash(1) Hadoop(1) JDK(1)
You might like
php5 and xml示例
2006/11/22 PHP
php 无限级 SelectTree 类
2009/05/19 PHP
基于php在各种web服务器的运行模式详解
2013/06/03 PHP
PHP实现QQ空间自动回复说说的方法
2015/12/02 PHP
Swoole-1.7.22 版本已发布，修复PHP7相关问题
2015/12/31 PHP
DIY jquery plugin - tabs标签切换实现代码
2010/12/11 Javascript
克隆javascript对象的三个方法小结
2011/01/12 Javascript
jquery js 获取时间差、时间格式具体代码
2013/06/05 Javascript
js中this的用法实例分析
2015/01/10 Javascript
jQuery异步上传文件插件ajaxFileUpload详细介绍
2015/05/19 Javascript
JavaScript位置与大小（1）之正确理解和运用与尺寸大小相关的DOM属性
2015/12/26 Javascript
confirm确认对话框的实现方法总结
2016/06/17 Javascript
jquery 追加元素append、prepend、before、after用法与区别分析
2016/12/02 Javascript
JavaScript用构造函数如何获取变量的类型名
2016/12/23 Javascript
canvas实现图像布局填充功能
2017/02/06 Javascript
JavaScript条件判断_动力节点Java学院整理
2017/06/26 Javascript
通过fastclick源码分析彻底解决tap“点透”
2017/12/24 Javascript
讲解vue-router之什么是编程式路由
2018/05/28 Javascript
vue富文本框（插入文本、图片、视频）的使用及问题小结
2018/08/17 Javascript
webpack-url-loader 解决项目中图片打包路径问题
2019/02/15 Javascript
Vue渲染过程浅析
2019/03/14 Javascript
微信小程序 setData 对 data数据影响问题
2019/04/18 Javascript
python socket网络编程步骤详解(socket套接字使用)
2013/12/06 Python
Python使用正则表达式实现文本替换的方法
2017/04/18 Python
Python机器学习logistic回归代码解析
2018/01/17 Python
详解TensorFlow在windows上安装与简单示例
2018/03/05 Python
Python csv模块使用方法代码实例
2019/08/29 Python
浅谈Python线程的同步互斥与死锁
2020/03/22 Python
python编写扎金花小程序的实例代码
2021/02/23 Python
使用CSS变量实现炫酷惊人的悬浮效果
2019/04/26 HTML / CSS
给交警的表扬信
2014/01/12 职场文书
高中生职业生涯规划书
2014/02/24 职场文书
预备党员半年考察意见
2015/06/01 职场文书
幼儿教师继续教育培训心得体会
2016/01/19 职场文书
8个JS的reduce使用实例和reduce操作方式
2021/10/05 Javascript
MySQL 字符集 character
2022/05/04 MySQL