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.傲游.搜狗.世界之窗.效果图如下: 在线预 ...
随机推荐
- python初学者-从小到大排序
x=input("x=") y=input("y=") z=input("z=") if x>y: x,y=y,x if x>z ...
- setTimeout 是到了xx ms 就执行吗，了解浏览器的 Event-Loop 机制
要想 JavaScript 玩得溜,还得了解波 JavaScript 执行机制/(ㄒoㄒ)/~~. 个人博客:https://shansan.top 前言 最近看了波 JavaScript 相关的文章 ...
- 超详细的第一个Servlet程序
Servlet的第一个程序! 首先查看官方文档,来编写我们的第一段代码 1.先启动Tomcat,确保我们能够正常访问. 2.http://localhost:8080/examples/ 查看 ...
- 一个简单的java项目使用hibernate连接mysql数据库
实体类与表对应文件Customer.hbm.xml <?xml version="1.0" encoding="UTF-8"?><!DOCTY ...
- 【目标检测】基于传统算法的目标检测方法总结概述 Viola-Jones | HOG+SVM | DPM | NMS
"目标检测"是当前计算机视觉和机器学习领域的研究热点.从Viola-Jones Detector.DPM等冷兵器时代的智慧到当今RCNN.YOLO等深度学习土壤孕育下的GPU暴力美 ...
- python之scrapy篇(三)
一.创建工程(cmd) scrapy startproject xxxx 二.编写item文件 # -*- coding: utf-8 -*- # Define here the models for ...
- 最全总结 | 聊聊 Python 办公自动化之 PPT（中）
1. 前言 上一篇文章简单地介绍了 PPT 的文档结构,并使用 python-pptx 这个依赖库完成对 PPT 文档最基本的操作 最全总结 | 聊聊 Python 办公自动化之 PPT(上) 作为 ...
- Win Task 任务管理器 批量杀进程方法
Example Kill All Chrome & Chrome Driver taskkill /IM chromedriver.exe /F taskkill /IM chrome.exe ...
- Java8接口的默认方法
项目实战 实现上图接口的实现类有很多,其中有些实现类已经在生成环境了,现在需要新增几个实现类,都需要有回调方法,所以在接口中添加了一个回调的默认方法,如果使用接口的普通方法就得改所有实现了接口的实现类 ...
- vue的路由组件挂载。
vue通过多种方式可以将组件挂载到一个页面上.挂载方式有四种.其实也并不止四种.这里呢就简单的提四种方式去怎样挂载组件. 第一种就是作为标签形式挂载.前面也提到. 后面的就是一般的挂载组件和按需挂载组 ...