jQuery 选项卡切换过渡效果
<!DOCTYPE html> <head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
ul,li {
list-style: none;
margin: 0;
padding: 0;
} .tabBox {
width: 600px;
height: 200px;
border: 1px solid pink;
} .ul1 {
display: flex;
} .ul1 li {
width: 50%;
line-height: 40px;
text-align: center;
cursor: pointer;
border-bottom: 2px solid #dedede;
position: relative;
margin: 0 5px;
} .ul1 li.active:after {
content: "";
position: absolute;
z-index: 1;
border-bottom: 2px solid #0070FF;
width: 0px;
display: block;
animation: w 1s;
animation-fill-mode: forwards;
}
@-webkit-keyframes w{
100% {
width: 100%;
}
}
.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>
</ul>
<ul class="ul2">
<li class="selected">内容1</li>
<li>内容2</li>
</ul>
</div>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script>
$(function() {
$(".ul1>li").click(function() {
$(this).addClass("active").siblings("li").removeClass("active");
var index = $(this).index();
$(".ul2>li").eq(index).fadeIn(1000).siblings().hide();
})
})
</script>
</body> </html>
效果预览：
jQuery 选项卡切换过渡效果的更多相关文章
- jquery 选项卡切换、选项卡封装、简单的jquery选项卡封装、tab切换效果
相信选项卡切换是大家常用的效果单独写一个选项卡切换很方便但是要是一个页面出现多个选项卡不做封装的话会显得代码很杂乱 <div class="bodyCenter"> & ...
- jquery 选项卡切换 带背景图片
html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti ...
- jquery 选项卡切换
html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti ...
- jquery选项卡切换
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding= ...
- 基于jquery左侧带选项卡切换的焦点图
今天给大家分享一款基于jquery左侧带选项卡切换的焦点图.这款焦点图左侧有短标题,单击切换并显示长标题.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class ...
- jquery Tabs选项卡切换
效果: HTML部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- 使用jquery实现选项卡切换效果
几张简陋的框架效果图 页面加载时: 选项卡操作后: css样式: <style type="text/css"> *{margin:0px;padding:0px;} ...
- 基于jQuery扁平多颜色选项卡切换代码
基于jQuery扁平多颜色选项卡切换代码,支持自动轮播切换,鼠标滑过切换的jQuery特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class=" ...
- 基于jquery仿360网站图片选项卡切换代码
今天给大家分享一款基于jquery仿360网站图片选项卡切换代码.这款实例适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预 ...
随机推荐
- 【命令】top命令
功用: <---实时动态地查看系统的整体运行情况,两个命令都是查看运行状况,但是htop更加易用---> TOP是一个动态显示过程,即可以通过用户按键来不断刷新当前状态.如果在前台执行该命 ...
- 基于frp的内网穿透实例2-通过自定义域名访问部署于内网的 web 服务
原文地址:https://wuter.cn/1837.html/ 一.想要实现的功能 1.将部署在自己电脑上的网站用于公网访问. 2.将未备案域名解析至国内服务器(即我宿舍的老母鸡上). 二.服务端配 ...
- （十三）、向shell脚本中传参
一.向脚本中传递位置参数 向脚本中传递参数的数目理论上可以无数多,但是只有前9个能被访问,使用shift可以改变此限制 $0 $1 $2 $3 $4 $5 $6 $7 $8 $9 脚本名字 first ...
- Java Int类型与字符，汉字之间的转换
/** * java 中的流主要是分为字节流和字符流 * 再一个角度分析的话可以分为输入流和输出流 * 输入和输出是一个相对的概念 相对的分别是jvm虚拟机的内存大小 * 从另一个角度讲Java或者用 ...
- wildfly 21中应用程序的部署
目录 简介 Managed Domain中的部署 管理展开的部署文件 standalone模式下的部署 standalone模式下的自动部署 Marker Files 受管理的和不受管理的部署 部署覆 ...
- [LeetCode]求两个链表的焦点--Intersection of Two Linked Lists
标题题目地址 1.解题意 求解两个链表的焦点,这个交点并不是焦点的值相等,而是需要交点之后的数据是完全相等的. 落实到java层面,就是交点处的对象是同一个对象即可. ps:我最开始没有读懂题目,然后 ...
- python对离散数据进行编码
机器学习中会遇到一些离散型数据,无法带入模型进行训练,所以要对其进行编码,常用的编码方式有两种: 1.特征不具备大小意义的直接独热编码(one-hot encoding) 2.特征有大小意义的采用映射 ...
- 3. Longest Substring Without Repeating Characters寻找不重复的最大子串
首先弄清楚Substring和Subsequence,前者是子串,要求连续,后者是子序列,可以不连续 public int lengthOfLongestSubstring(String s) { / ...
- J.U.C关于Execute实现
JAVASE5的Execute将为你管理Thread对象,是启动任务的优选方案 /***newCachedThreadPool在程序的执行过程中通常会创建于所需任务相同数量的线程即可以达到Intege ...
- CSS-position 属性&元素脱离文档流引发父级边框塌陷问题
CSS-position 属性 CSS 定位机制 CSS 有三种基本的定位机制:普通流.浮动(float)和绝对定位(position). 除非专门指定,否则所有框都在普通流中定位.也就是说,普通流中 ...