首页
所有分类
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实现可点击伸缩与展开的菜单效果代码
Aug 31 Javascript
Javascript对象字面量的理解
Jun 22 Javascript
JavaScript中的this使用详解
Jul 27 Javascript
原生js实现tab选项卡切换
Mar 23 Javascript
React学习笔记之列表渲染示例详解
Aug 22 Javascript
微信小程序-getUserInfo回调的实例详解
Oct 27 Javascript
微信小程序实现留言板（Storage）
Nov 02 Javascript
基于Vue2实现简易的省市区县三级联动组件效果
Nov 05 Javascript
微信小程序实现简单表格
Feb 14 Javascript
使用vue自定义指令开发表单验证插件validate.js
May 23 Javascript
createObjectURL方法实现本地图片预览
Sep 30 Javascript
基于JavaScript实现单例模式
Oct 30 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
瑞典购物网站(55) 葡萄牙购物网站(13) 意大利购物网站(128) 南非购物网站(8) 荷兰购物网站(99) 阿根廷购物网站(9) 比利时购物网站(33) 肯尼亚购物网站(2) 芬兰购物网站(10) 挪威购物网站(7)
You might like
Smarty模板简单配置与使用方法示例
2016/05/23 PHP
浅谈PHP发送HTTP请求的几种方式
2017/07/25 PHP
PHPstorm激活码2020年5月13日亲测有效
2020/09/17 PHP
jQuery学习基础知识小结
2010/11/25 Javascript
jquery post方式传递多个参数值后台以数组的方式进行接收
2013/01/11 Javascript
JS字符串处理实例代码
2013/08/05 Javascript
使用JS读秒使用示例
2013/09/21 Javascript
jquery slibings选取同级其他元素的实现代码
2013/11/15 Javascript
jquery取消事件冒泡的三种方法(推荐)
2016/05/28 Javascript
js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】
2016/08/02 Javascript
jQuery属性选择器用法示例
2016/09/09 Javascript
Bootstrap企业网站实战项目4
2016/10/14 Javascript
vue.js入门（3）——详解组件通信
2016/12/02 Javascript
jQuery简易时光轴实现方法示例
2017/03/13 Javascript
Node.js中看JavaScript的引用
2017/04/22 Javascript
BootstrapTable加载按钮功能实例代码详解
2017/09/22 Javascript
AngularJS实现的根据数量与单价计算总价功能示例
2017/12/26 Javascript
JS字典Dictionary类定义与用法示例
2019/02/01 Javascript
Echarts实现单条折线可拖拽效果
2019/12/19 Javascript
在Vue中使用Select选择器拼接label的操作
2020/10/22 Javascript
JS实现手风琴特效
2020/11/08 Javascript
js实现弹幕墙效果
2020/12/10 Javascript
[02:42]DOTA2英雄基础教程 杰奇洛
2013/12/23 DOTA
python新手经常遇到的17个错误分析
2014/07/30 Python
Python写的Socks5协议代理服务器
2014/08/06 Python
python多重继承实例
2014/10/11 Python
详解Python中映射类型的内建函数和工厂函数
2015/08/19 Python
Python 实现12306登录功能实例代码
2018/02/09 Python
python pandas库的安装和创建
2019/01/10 Python
python3 Scrapy爬虫框架ip代理配置的方法
2020/01/17 Python
CSS3 网页下拉菜单代码解释 中文翻译
2010/02/27 HTML / CSS
Html5实现二维码扫描并解析
2016/01/20 HTML / CSS
美国克罗格超市在线购物：Kroger
2019/06/21 全球购物
德国的大型美妆个护电商：Flaconi
2020/06/26 全球购物
宇宙与人观后感
2015/06/05 职场文书
zabbix agent2 监控oracle数据库的方法
2021/05/13 Oracle