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 EasyUI 组件加上清除功能的方法(详解)
Apr 13 jQuery
jQuery选择器_动力节点Java学院整理
Jul 05 jQuery
jQuery制作全屏宽度固定高度轮播图(实例讲解)
Jul 08 jQuery
基于jquery实现多选下拉列表
Aug 02 jQuery
jquery+css实现下拉列表功能
Sep 03 jQuery
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
Oct 20 jQuery
关于jQuery里prev()的简单操作代码
Oct 27 jQuery
jQuery幻灯片插件owlcarousel参数说明中文文档
Feb 27 jQuery
jQuery模拟12306城市选择框功能简单实现方法示例
Aug 13 jQuery
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
Oct 10 jQuery
jquery实现二级导航下拉菜单效果实例
May 14 jQuery
jQuery擦除插件eraser使用方法详解
Jan 11 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关联数组快速排序的方法
2015/04/17 PHP
Json_encode防止汉字转义成unicode的方法
2016/02/25 PHP
thinkphp5.1框架模板布局与模板继承用法分析
2019/07/19 PHP
JavaScript设置表单上传时文件个数的方法
2015/08/11 Javascript
JS组件Bootstrap导航条使用方法详解
2016/04/29 Javascript
AngularJS模板加载用法详解
2016/11/04 Javascript
详解vue-cli中配置sass
2017/06/21 Javascript
Web开发使用Angular实现用户密码强度判别的方法
2017/09/27 Javascript
vue实现未登录跳转到登录页面的方法
2018/07/17 Javascript
JS解析后台返回的JSON格式数据实例
2018/08/06 Javascript
vue 内置过滤器的使用总结(附加自定义过滤器)
2018/12/11 Javascript
angular6的table组件开发的实现示例
2018/12/26 Javascript
Vue+Express实现登录注销功能的实例代码
2019/05/05 Javascript
使用vue-router切换页面时,获取上一页url以及当前页面url的方法
2019/05/06 Javascript
JavaScript实现简单随机点名器
2019/11/21 Javascript
javascript实现搜索筛选功能实例代码
2020/11/12 Javascript
Python break语句详解
2014/03/11 Python
python的类变量和成员变量用法实例教程
2014/08/25 Python
python通过exifread模块获得图片exif信息的方法
2015/03/16 Python
教你用Python创建微信聊天机器人
2020/03/31 Python
Python Request爬取seo.chinaz.com百度权重网站的查询结果过程解析
2019/08/13 Python
Python绘制K线图之可视化神器pyecharts的使用
2021/03/02 Python
html5 的a标签 Href 拨电话的写法
2013/11/04 HTML / CSS
匡威意大利官方商店 :Converse意大利
2018/11/27 全球购物
Traffic People官网:女式花裙、上衣和连身裤
2020/10/12 全球购物
链表面试题-一个链表的结点结构
2015/05/04 面试题
餐厅总厨求职信
2014/03/04 职场文书
优秀广告词大全
2014/03/19 职场文书
蟋蟀的住宅教学反思
2014/04/26 职场文书
服务整改报告
2014/11/06 职场文书
预防艾滋病宣传活动总结
2015/05/09 职场文书
运动会班级前导词
2015/07/20 职场文书
想创业成功,需要掌握这些要点
2019/12/06 职场文书
深入理解Pytorch微调torchvision模型
2021/11/11 Python
MySQL事务操作的四大特性以及并发事务问题
2022/04/12 MySQL
微信告警的zabbix监控系统 监控整个NGINX集群
2022/04/18 Servers