jquery实现有过渡效果的tab切换


Posted in jQuery onJuly 17, 2020

本文实例为大家分享了jquery实现tab切换的具体代码,供大家参考,具体内容如下

效果:

jquery实现有过渡效果的tab切换

代码:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title></title>
 <style type="text/css">
 ul,li {
 list-style: none;
 margin: 0;
 padding: 0;
 }
 .tabBox {
 width: 400px;
 height: 200px;
 border: 1px solid pink;
 }
 .ul1 {
 height: 40px;
 border-bottom: 1px solid pink;
 }
 .ul1 li {
 width: 25%;
 line-height: 40px;
 text-align: center;
 float: left;
 cursor: pointer;
 }
 .ul1 li.active {
 background-color: pink;
 transition: all 0.6s ease-in-out; /* 标题过渡效果 */
 }
 .ul2 {
 overflow: hidden;
 }
 .ul2 li {
 display: none;
 }
 .ul2 li.selected {
 display: block;
 }
 </style>
 </head>
 <body>
 <div class="tabBox">
 <ul class="ul1">
 <li class="active">标题1</li>
 <li>标题2</li>
 <li>标题3</li>
 <li>标题4</li>
 </ul>
 <ul class="ul2">
 <li class="selected">内容内容1</li>
 <li>内容2内容2</li>
 <li>内容3内容3</li>
 <li>内容4内容4</li>
 </ul> 
 </div>
 <script type="text/javascript" src="jquery-2.1.1.js"></script>
 <script>
 $(function(){
 $(".ul1>li").mouseover(function(){
 $(this).addClass("active").siblings("li").removeClass("active");
 var index = $(this).index();
 $(".ul2>li:eq("+index+")").fadeIn(1000).siblings("li").hide(); 
 })
 }) 
 </script>
 </body>
</html>

如果大家还想深入学习,可以点击两个精彩的专题:javascript选项卡操作方法汇总、jquery选项卡操作方法汇总

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jquery插件制作 自增长输入框实现代码
Aug 17 jQuery
BootStrap中jQuery插件Carousel实现轮播广告效果
Mar 27 jQuery
jQuery自定义图片上传插件实例代码
Apr 04 jQuery
jQuery导航条固定定位效果实例代码
May 26 jQuery
深入研究jQuery图片懒加载 lazyload.js使用方法
Aug 16 jQuery
jQuery实现获取选中复选框的值实例详解
Jun 28 jQuery
浅析vue-router jquery和params传参(接收参数)$router $route的区别
Aug 03 jQuery
使vue实现jQuery调用的两种方法
May 12 jQuery
jQuery实现的记住帐号密码功能完整示例
Aug 03 jQuery
jQuery模仿ToDoList实现简单的待办事项列表
Dec 30 jQuery
详解jQuery中的prop()使用方法
Jan 05 jQuery
如何基于jQuery实现五角星评分
Sep 02 jQuery
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 #jQuery
jQuery 添加元素和删除元素的方法
Jul 15 #jQuery
Jquery使用each函数实现遍历及数组处理
Jul 14 #jQuery
jQuery 实现DOM元素拖拽交换位置的实例代码
Jul 14 #jQuery
jQuery开发仿QQ版音乐播放器
Jul 10 #jQuery
jQuery实现B2B网站后台管理系统侧导航
Jul 08 #jQuery
jQuery使用jsonp实现百度搜索的示例代码
Jul 08 #jQuery
You might like
PHP实现对png图像进行缩放的方法(支持透明背景)
2015/07/15 PHP
javascript字典探测用户名工具
2006/10/05 Javascript
分享XmlHttpRequest调用Webservice的一点心得
2012/07/20 Javascript
jquery的冒泡事件的阻止与允许(三种实现方法)
2013/02/01 Javascript
弹出窗口并且此窗口带有半透明的遮罩层效果
2014/03/13 Javascript
使用javaScript动态加载Js文件和Css文件
2015/10/24 Javascript
由浅入深讲解Javascript继承机制与simple-inheritance源码分析
2015/12/13 Javascript
Javascript基础之数组的使用
2016/05/13 Javascript
Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记
2016/07/08 Javascript
Bootstrap CSS组件之导航条(navbar)
2016/12/17 Javascript
微信小程序 省市区选择器实例详解(附源码下载)
2017/01/05 Javascript
JavaScript数据结构与算法之队列原理与用法实例详解
2017/11/22 Javascript
react+redux的升级版todoList的实现
2017/12/18 Javascript
微信小程序实现手势图案锁屏功能
2018/01/30 Javascript
jquery 给动态生成的标签绑定事件的几种方法总结
2018/02/24 jQuery
Vue中Table组件Select的勾选和取消勾选事件详解
2019/03/19 Javascript
layui表格数据重载
2019/07/27 Javascript
VSCode搭建Vue项目的方法
2020/04/30 Javascript
vue select 获取value和lable操作
2020/08/28 Javascript
vue中可编辑树状表格的实现代码
2020/10/31 Javascript
在Python下进行UDP网络编程的教程
2015/04/29 Python
python去掉行尾的换行符方法
2017/01/04 Python
matplotlib绘制动画代码示例
2018/01/02 Python
python 判断linux进程,并杀死进程的实现方法
2019/07/01 Python
Python遍历字典方式就实例详解
2019/12/28 Python
pytorch 实现将自己的图片数据处理成可以训练的图片类型
2020/01/08 Python
详解python os.path.exists判断文件或文件夹是否存在
2020/11/16 Python
雅萌 (YA-MAN) :日本美容家电领域的龙头企业
2017/05/12 全球购物
捷克家电和家具购物网站:OKAY.cz
2020/07/23 全球购物
对于没有初始化的变量的初始值可以作怎样的假定
2014/10/12 面试题
大学生社会实践自我鉴定
2014/03/24 职场文书
高中教师考核方案
2014/05/18 职场文书
承诺书模板
2014/08/30 职场文书
《当代神农氏》教学反思
2016/02/23 职场文书
python前后端自定义分页器
2022/04/13 Python
Win11开始菜单添加休眠选项
2022/04/19 数码科技