<!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 选项卡切换过渡效果的更多相关文章

  1. jquery 选项卡切换、选项卡封装、简单的jquery选项卡封装、tab切换效果

    相信选项卡切换是大家常用的效果单独写一个选项卡切换很方便但是要是一个页面出现多个选项卡不做封装的话会显得代码很杂乱 <div class="bodyCenter"> & ...

  2. jquery 选项卡切换 带背景图片

    html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti ...

  3. jquery 选项卡切换

    html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti ...

  4. jquery选项卡切换

    <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding= ...

  5. 基于jquery左侧带选项卡切换的焦点图

    今天给大家分享一款基于jquery左侧带选项卡切换的焦点图.这款焦点图左侧有短标题,单击切换并显示长标题.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class ...

  6. jquery Tabs选项卡切换

    效果: HTML部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  7. 使用jquery实现选项卡切换效果

    几张简陋的框架效果图 页面加载时: 选项卡操作后: css样式: <style type="text/css"> *{margin:0px;padding:0px;} ...

  8. 基于jQuery扁平多颜色选项卡切换代码

    基于jQuery扁平多颜色选项卡切换代码,支持自动轮播切换,鼠标滑过切换的jQuery特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=" ...

  9. 基于jquery仿360网站图片选项卡切换代码

    今天给大家分享一款基于jquery仿360网站图片选项卡切换代码.这款实例适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预 ...

随机推荐

  1. iOS 集成友盟分享图片链接为http时无法加载问题解决

    一.问题描述 UMShareWebpageObject *obj = [UMShareWebpageObject shareObjectWithTitle:title descr:shareText ...

  2. MySQL获取上月第一天、上月最后日、本月第一天、本月最后日的方法

    直接贴SQL语句了 #上月第一天 SELECT DATE_FORMAT(DATE_SUB(CURDATE(),INTERVAL 1 MONTH),'%Y-%m-01'); #上月最后日 SELECT ...

  3. C#中Newtonsoft.Json 序列化和反序列化 时间格式

    步骤 引用 using Newtonsoft.Json; using Newtonsoft.Json.Converters; 格式配置 IsoDateTimeConverter timeFormat ...

  4. python初学者-判断一个数是否为素数

    while True: #判断为真 num = int(input('请输入一个数:')) for i in range(2,num):#判断在num之前的数能不能把num整除 if(num%i == ...

  5. Failed to process, please exclude the tableName or statementId.--Mybatis-Plus

    多租户多个用户间使用同一套程序,但每个用户之间实现数据隔离 方法一:在 Mapper 的自定义方法上添加注解 @SqlParser(filter = true),在查询的时候不需要添加租户信息 @Sq ...

  6. java动态代理实现与原理详细分析(转)

    关于Java中的动态代理,我们首先需要了解的是一种常用的设计模式--代理模式,而对于代理,根据创建代理类的时间点,又可以分为静态代理和动态代理. 一.代理模式    代理模式是常用的java设计模式, ...

  7. 【探索之路】机器人篇(4)-根据3D文件来优化自己的机器人模型

    此章节不是必须做的!!!! 因为我已经用solidworks画了机器人的3D模型,那我就直接导入已经画好的三维模型. 如果大家没有画也是可以直接使用上一章节我们已经构建的机器人模型.我这里只是一个对显 ...

  8. hadoop伪分布式平台组件搭建

    第一部分:系统基础配置 系统基础配置中主完成了安装大数据环境之前的基础配置,如防火墙配置和安装MySQL.JDK安装等 第一步:关闭防火墙 Hadoop与其他组件的服务需要通过端口进行通信,防火墙的存 ...

  9. mapboxgl实现带箭头轨迹线

    最近在使用mapboxgl实现轨迹展示时,想实现类似高德地图导航轨迹效果,然而并未在网上找到类似示例.经一番研究与尝试,最终解决,效果如下. 添加箭头核心代码如下,只需在配置layout中添加symb ...

  10. docker frps 内网穿透容器化服务

    准备 域名解析 将frp.xx.com解析到服务器ip,将泛域名 *.frp.xx.com解析到frp.xx.com即可 https证书申请 泛域名证书现在可以用acme.sh申请Let's Encr ...