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插件FusionCharts实现的Marimekko图效果示例【附demo源码】
Mar 24 jQuery
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
Jun 09 jQuery
jquery基于layui实现二级联动下拉选择(省份城市选择)
Jun 20 jQuery
jQuery实现的表格前端排序功能示例
Sep 18 jQuery
JavaScript实现离开页面前提示功能【附jQuery实现方法】
Sep 26 jQuery
jQuery实现监听下拉框选中内容发生改变操作示例
Jul 13 jQuery
jQuery实现基本淡入淡出效果的方法详解
Sep 05 jQuery
Easyui 去除jquery-easui tab页div自带滚动条的方法
May 10 jQuery
jQuery实现判断滚动条滚动到document底部的方法分析
Aug 27 jQuery
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
Mar 20 jQuery
jQuery实现图片切换效果
Oct 19 jQuery
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 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 裁剪图片成固定大小代码方法
2009/09/09 PHP
php数组(array)输出的三种形式详解
2013/06/05 PHP
PHP 过滤页面中的BOM(实现代码)
2013/06/29 PHP
php中fsockopen用法实例
2015/01/05 PHP
学习php设计模式 php实现门面模式(Facade)
2015/12/07 PHP
php实现图片以base64显示的方法
2016/10/13 PHP
php注册系统和使用Xajax即时验证用户名是否被占用
2017/08/31 PHP
jscript之Read an Excel Spreadsheet
2007/06/13 Javascript
url 特殊字符 传递参数解决方法
2010/01/01 Javascript
nodejs win7下安装方法
2012/05/24 NodeJs
jquery不会自动回收xmlHttpRequest对象 导致了内存溢出
2012/06/18 Javascript
jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
2013/04/08 Javascript
jQuery搜索子元素的方法
2015/02/10 Javascript
jQuery查看选中对象HTML代码的方法
2016/06/17 Javascript
浅谈javascript的url参数parse和build函数
2017/03/04 Javascript
前端跨域的几种解决方式总结(推荐)
2017/08/16 Javascript
深入理解ES6 Promise 扩展always方法
2017/09/26 Javascript
浅析Javascript中双等号(==)隐性转换机制
2017/10/27 Javascript
JS运动特效之链式运动分析
2018/01/24 Javascript
关于JavaScript中高阶函数的魅力详解
2018/09/07 Javascript
利用 JavaScript 实现并发控制的示例代码
2020/12/31 Javascript
[00:35]DOTA2上海特级锦标赛 VP战队宣传片
2016/03/04 DOTA
Python如何通过subprocess调用adb命令详解
2017/08/27 Python
对python for 文件指定行读写操作详解
2018/12/29 Python
Python 的AES加密与解密实现
2019/07/09 Python
pytorch 实现打印模型的参数值
2019/12/30 Python
python opencv pytesseract 验证码识别的实现
2020/08/28 Python
非功能性需求都包括哪些方面
2013/10/29 面试题
九年级英语教学反思
2014/01/31 职场文书
公司成本主管岗位责任制
2014/02/21 职场文书
学习经验演讲稿
2014/05/10 职场文书
2014年光棍节活动策划方案(创意集锦)
2014/09/29 职场文书
办理收楼委托书范本
2014/10/09 职场文书
工作报告范文
2019/06/20 职场文书
Python实战之实现简易的学生选课系统
2021/05/25 Python
详解OpenCV获取高动态范围(HDR)成像
2022/04/29 Python