首页
所有分类
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 相关文章推荐
刷新时清空文本框内容的js代码
Apr 23 Javascript
javascript下数值型比较难点说明
Jun 07 Javascript
js获取元素在浏览器中的绝对位置
Jul 24 Javascript
flash调用js中的方法,让js传递变量给flash的办法及思路
Aug 07 Javascript
jQuery :first选择器使用介绍
Aug 09 Javascript
js实现适用于素材网站的黑色多级菜单导航条效果
Aug 24 Javascript
值得分享和收藏的Bootstrap学习教程
May 12 Javascript
JavaScript 最佳实践：帮你提升代码质量
Dec 03 Javascript
Bootstrap Table列宽拖动的方法
Aug 15 Javascript
浅谈Webpack核心模块tapable解析
Sep 11 Javascript
微信小程序地图实现展示线路
Jul 29 Javascript
如何优化vue打包文件过大
Apr 13 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
Tomcat(18) React(6) win10(43) win11(40) i7 6700(1) ipad(1) i5 9400(1) i5 10400(1) GTX1660(1) 速龙(1)
You might like
PHP&amp;MYSQL服务器配置说明
2006/10/09 PHP
百度工程师讲PHP函数的实现原理及性能分析（二）
2015/05/13 PHP
php实现在服务器端调整图片大小的方法
2015/06/16 PHP
yii2高级应用之自定义组件实现全局使用图片上传功能的方法
2016/10/08 PHP
php 自定义错误日志实例详解
2016/11/12 PHP
解决thinkphp5未定义变量会抛出异常,页面错误,请稍后再试的问题
2019/10/16 PHP
PHP与Web页面交互操作实例分析
2020/06/02 PHP
JavaScript类和继承 this属性使用说明
2010/09/03 Javascript
7个让JavaScript变得更好的注意事项
2015/01/28 Javascript
javascript中typeof操作符和constucor属性检测
2015/02/26 Javascript
C#中使用迭代器处理等待任务
2015/07/13 Javascript
使用Browserify配合jQuery进行编程的超级指南
2015/07/28 Javascript
JS中生成随机数的用法及相关函数
2016/01/09 Javascript
JavaScript优化专题之Loading and Execution加载和运行
2016/01/20 Javascript
javascript下使用Promise封装FileReader
2016/02/19 Javascript
JavaScript评论点赞功能的实现方法
2017/03/13 Javascript
vue实现长图垂直居上 vue实现短图垂直居中
2017/10/18 Javascript
详解vue2.0+axios+mock+axios-mock+adapter实现登陆
2018/07/19 Javascript
vue中引入第三方字体文件的方法示例
2018/12/17 Javascript
Vue源码探究之虚拟节点的实现
2019/04/17 Javascript
Vuex,iView UI面包屑导航使用扩展详解
2019/11/04 Javascript
webpack4 optimization使用总结
2019/11/10 Javascript
基于element-ui封装可搜索的懒加载tree组件的实现
2020/05/22 Javascript
Python实现的微信公众号群发图片与文本消息功能实例详解
2017/06/30 Python
python 把列表转化为字符串的方法
2018/10/23 Python
python实现播放音频和录音功能示例代码
2018/12/30 Python
利用python和ffmpeg 批量将其他图片转换为.yuv格式的方法
2019/01/08 Python
python 使用poster模块进行http方式的文件传输到服务器的方法
2019/01/15 Python
python+adb命令实现自动刷视频脚本案例
2020/04/23 Python
Keras实现支持masking的Flatten层代码
2020/06/16 Python
Python中使用Selenium环境安装的方法步骤
2021/02/22 Python
Steve Madden官网：美国鞋类品牌
2017/01/29 全球购物
卖房协议书
2014/04/11 职场文书
新手必备Python开发环境搭建教程
2021/05/28 Python
javascript canvas实现雨滴效果
2021/06/09 Javascript
阿里云服务器Ubuntu 20.04上安装Odoo 15
2022/05/20 Servers