<!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. RESTful API风格

    前言 之前写的接口,有用过Webservices,MVC,ashx,但都没个统一的请求规范,随百度. 参考链接,原文出处 http://www.ruanyifeng.com/blog/2014/05/ ...

  2. 给因特尔S2600CO服务器主板安装【SAS控制器】驱动

    给因特尔S2600CO服务器主板安装[SAS控制器]驱动 1:首先打开[设备管理器]找到未识别驱动的[SAS控制器]双击进入 2:在[详细信息]选项卡,选择[兼容Id]属性可以看到PCI\VEN_80 ...

  3. 浅析Python闭包

    1.什么是闭包 在介绍闭包概念前,我们先来看一段简短的代码 def sum_calc(*args): def wrapper(): sum = 0 for n in args: sum += n; r ...

  4. 有两张表；使用SQL查询，查询所有的客户订单日期最新的前五条订单记录。

    客户信息表(c CUSTOM)有以下字段:id.name.mobile 客户订单表(C_ORDER)有以下字段:id.custom_id.commodity.count.order _date Sel ...

  5. .NET 5 开源工作流框架elsa技术研究

    今天假期第一天,研究了.NET 5开源工作流框架elsa,现在分享给大家. 一.框架简介 elsa是一个开源的.NET Standard 工作流框架,官方网站:https://elsa-workflo ...

  6. java零基础之--JDK安装篇

    ---恢复内容开始--- 很多零基础学习者在开始学习java中很难理解JDK的安装和配置,以下是基于Windows 7 的安装配置流程(Windows 10类似) 1. 在安装之前我们先了解几个名词: ...

  7. 大数据量查询容易OOM？试试MySQL流式查询

    一.前言 程序访问 MySQL 数据库时,当查询出来的数据量特别大时,数据库驱动把加载到的数据全部加载到内存里,就有可能会导致内存溢出(OOM). 其实在 MySQL 数据库中提供了流式查询,允许把符 ...

  8. 关于IP的相关计算

    不论是考研还是考各种计算机类的证,大家或多或少都会遇到网络部分的一种题型,大体的归类就是以下几种: 已知一个IP是192.XX.XX.XX,子网掩码是255.255.255.0,那么它的网络地址是多少 ...

  9. JavaScript CMD规范

    CMD是另一种js模块化方案,它与AMD很类似,不同点在于:AMD 推崇依赖前置.提前执行,CMD推崇依赖就近.延迟执行.此规范其实是在sea.js推广过程中产生的. AMD规范请移步AMD 模块化规 ...

  10. 基础篇：JAVA原子组件和同步组件

    前言 在使用多线程并发编程的时,经常会遇到对共享变量修改操作.此时我们可以选择ConcurrentHashMap,ConcurrentLinkedQueue来进行安全地存储数据.但如果单单是涉及状态的 ...