首页
所有分类
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 相关文章推荐
Jquery 实现checkbox全选方法
Jan 28 Javascript
jquery插件hiAlert实现网页对话框美化
May 03 Javascript
jquery简单实现图片切换效果的方法
May 12 Javascript
jQuery unbind()方法实例详解
Jan 19 Javascript
Angularjs实现多个页面共享数据的方式
Mar 29 Javascript
JavaScript类型系统之布尔Boolean类型详解
Jun 26 Javascript
Javascript中的getter和setter初识
Aug 17 Javascript
浅谈vue方法内的方法使用this的问题
Sep 15 Javascript
浅谈Webpack4 Tree Shaking 终极优化指南
Nov 18 Javascript
javascript实现留言板功能
Feb 08 Javascript
基于openlayers实现角度测量功能
Sep 28 Javascript
详解Vue项目的打包方式(生成dist文件)
Jan 18 Vue.js
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
LW(1) SWL(1) 电台(1) GWEN(1) 电磁辐射(1) 调幅(1) ad hoc(1) FM(4) 发报机(1) SW(1)
You might like
php获得用户ip地址的比较不错的方法
2014/02/08 PHP
PHP中使用Imagick实现各种图片效果实例
2015/01/21 PHP
javascript解析json数据的3种方式
2014/05/08 Javascript
JavaScript运行机制之事件循环(Event Loop)详解
2014/10/10 Javascript
node.js从数据库获取数据
2016/05/08 Javascript
JQuery 设置checkbox值二次无效的解决方法
2016/07/22 Javascript
js 中文汉字转Unicode、Unicode转中文汉字、ASCII转换Unicode、Unicode转换ASCII、中文转换
2016/12/06 Javascript
详解AngularJS验证、过滤器、指令
2017/01/04 Javascript
Mui使用jquery并且使用点击跳转新窗口的实例
2017/08/19 jQuery
基于Vue2的独立构建与运行时构建的差别(详解)
2017/12/06 Javascript
vue绑定的点击事件阻止冒泡的实例
2018/02/08 Javascript
详解如何使用router-link对象方式传递参数？
2019/05/02 Javascript
vue实现百度搜索功能
2020/12/28 Javascript
JavaScript动画实例之粒子文本的实现方法详解
2020/07/28 Javascript
Python解决鸡兔同笼问题的方法
2014/12/20 Python
python计算圆周率pi的方法
2015/07/11 Python
Python实现计算最小编辑距离
2016/03/17 Python
EM算法的python实现的方法步骤
2018/01/02 Python
python人民币小写转大写辅助工具
2018/06/20 Python
使用Python 正则匹配两个特定字符之间的字符方法
2018/12/24 Python
numpy.transpose()实现数组的转置例子
2019/12/02 Python
pytorch中的卷积和池化计算方式详解
2020/01/03 Python
python print 格式化输出,动态指定长度的实现
2020/04/12 Python
芬兰攀岩、山地运动和户外活动用品购物网站：Bergfreunde
2016/10/06 全球购物
毕业生求职简历中的自我评价
2013/10/18 职场文书
商务英语专业应届毕业生求职信
2013/10/28 职场文书
计算机应用职专应届生求职信
2013/11/12 职场文书
大学生简历的个人自我评价
2013/12/04 职场文书
2014年社区植树节活动方案
2014/02/28 职场文书
2014班子成员自我剖析材料思想汇报
2014/10/01 职场文书
2014年环境卫生工作总结
2014/11/24 职场文书
检讨书大全
2015/01/27 职场文书
前台接待员岗位职责
2015/04/15 职场文书
毕业论文致谢格式模板
2015/05/14 职场文书
无罪辩护词范文
2015/05/21 职场文书
2015年个人实习工作总结
2015/05/28 职场文书