首页
所有分类
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 字符 Escape,encodeURI,encodeURIComponent
Jul 09 Javascript
js实现杯子倒水问题自动求解程序
Mar 25 Javascript
jQuery中的val()示例应用
Feb 26 Javascript
jQuery的选择器中的通配符使用介绍
Mar 20 Javascript
js实现点击切换TAB标签实例
Aug 21 Javascript
详解vue渲染从后台获取的json数据
Jul 06 Javascript
AngularJS 前台分页实现的示例代码
Jun 07 Javascript
jQuery事件多次绑定与解绑问题实例分析
Feb 19 jQuery
微信小程序如何实现全局重新加载
Jun 05 Javascript
javascript绘制简单钟表效果
Apr 07 Javascript
javascript的hashCode函数实现代码小结
Aug 11 Javascript
Vue 列表页带参数进详情页的操作(router-link)
Nov 13 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
限流(2) 内置模块(1) 后端(1) tcp/ip(1) 数据库卡死(1) Parser(1) 限速(1) 递归(1) IP(1) tokenizer(1)
You might like
PHP与SQL语句常用大全
2016/12/10 PHP
JavaScript 利用Cookie记录用户登录信息
2009/12/08 Javascript
用jquery实现下拉菜单效果的代码
2010/07/25 Javascript
基于jQuery的前端数据通用验证库
2011/08/08 Javascript
Javascript 按位取反运算符 (~)
2014/02/04 Javascript
再分享70+免费的jquery 图片滑块效果插件和教程
2014/12/15 Javascript
node.js中的fs.readlinkSync方法使用说明
2014/12/17 Javascript
JavaScript常用小技巧小结
2014/12/29 Javascript
Javascript实现字数统计
2015/07/03 Javascript
JS实现的简洁纵向滑动菜单(滑动门)效果
2015/10/19 Javascript
jquery原理以及学习技巧介绍
2015/11/11 Javascript
jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
2016/09/23 Javascript
jquery文字填写自动高度的实现方法
2016/11/07 Javascript
JavaScript链式调用实例浅析
2018/12/19 Javascript
在Vue中使用Echarts实例图的方法实例
2020/10/10 Javascript
vue实现禁止浏览器记住密码功能的示例代码
2021/02/03 Vue.js
JavaScript使用setTimeout实现倒计时效果
2021/02/19 Javascript
Python实现提取谷歌音乐搜索结果的方法
2015/07/10 Python
python实现多线程抓取知乎用户
2016/12/12 Python
python计算两个地址之间的距离方法
2018/06/09 Python
Python3按一定数据位数格式处理bin文件的方法
2019/01/24 Python
对Django url的几种使用方式详解
2019/08/06 Python
基于python的selenium两种文件上传操作实现详解
2019/09/19 Python
Python turtle库绘制菱形的3种方式小结
2019/11/23 Python
python 异步async库的使用说明
2020/05/04 Python
Python matplotlib读取excel数据并用for循环画多个子图subplot操作
2020/07/14 Python
美国一家专业的太阳镜网上零售商：Solstice太阳镜
2016/07/25 全球购物
Nordgreen英国官网：斯堪的纳维亚设计师手表
2018/10/24 全球购物
电气技术员岗位职责
2013/11/19 职场文书
小小的船教学反思
2014/02/21 职场文书
《满井游记》教学反思
2014/02/26 职场文书
主题教育活动总结
2014/05/05 职场文书
端午节演讲稿
2014/05/23 职场文书
十佳少年事迹材料
2014/12/25 职场文书
redis缓存存储Session原理机制
2021/11/20 Redis
Rust中的Struct使用示例详解
2022/08/14 Javascript