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.傲游.搜狗.世界之窗.效果图如下: 在线预 ...
随机推荐
- java基础:switch语句应用,循环的详细介绍以及使用,附练习案列
1. switch语句 1.1 分支语句switch语句 格式 switch (表达式) { case 1: 语句体1; break; case 2: 语句体2; break; ... default ...
- NET 5 依赖注入多个服务实现类
依赖注入在 ASP.NET Core 中起中很重要的作用,也是一种高大上的编程思想,它的总体原则就是:俺要啥,你就给俺送啥过来. 服务类型的实例转由容器自动管理,无需我们在代码中显式处理. 因此,有了 ...
- Dovecot邮件服务器的正确安装方法
Dovecot邮件服务器的正确安装方法 apt remove dovecot-coredpkg -P dovecot-core sudo apt install dovecot-imapd dovec ...
- 在 WSL Ubuntu 上使用 .NET 进行跨平台开发新手入门
翻译自 haydenb 2020年6月3日的文章<Getting started with cross-platform development using .NET on Ubuntu on ...
- idea 中在src/main/java中的xml扫描不到问题
<build> <!-- start idea 默认 不加载 java下的配置文件 --> <resources> <resource> <dir ...
- 这一次，彻底理解XSS攻击
希望读完本文大家彻底理解XSS攻击,如果读完本文还不清楚,我请你吃饭慢慢告诉你~ 话不多说,我们进入正题. 一.简述 跨站脚本(Cross-site scripting,简称为:CSS, 但这会与层叠 ...
- ip，子网掩码，网关以及dns简述
ip 描述 ip地址用于标识不同的计算机身份,ip地址=网络地址+主机地址 例子 192.168.1.168(ip地址)=192.168.1.0(网络地址)+0.0.0.168(主机地址) 寻址过程 ...
- java数组之binarySearch查找
/** * 1.如果找到目标对象则返回<code>[公式:-插入点-1]</code> * 插入点:第一个大与查找对象的元素在数组中的位置,如果数组中的所有元素都小于要查找的对 ...
- MODBUS_RTU通信协议
Modbus是一种串行通信协议,是Modicon公司(现在的施耐德电气Schneider Electric)于1979年为使用可编程逻辑控制器(PLC)通信而发表.Modbus已经成为工业领域通信协议 ...
- shellSyntax.md
shell #! /bin/bash 头文件 echo -e 若字符串出现特殊字符,则特别处理 -n 不要在最后自动换行 ./filename.sh sh filename.sh r ...