<!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. PHP比较数组、对象是否为空

    PHP简单对比对象.数组是不是为空: 1 <?php 2 /*简单的比较对象和数组是不是为空*/ 3 4 #定义空类EmptyClass 5 class EmptyClass{} 6 7 $em ...

  2. iOS音乐电台类项目开发

    1.技术难度不是太大,代码大致如下 2.用到的一些第三方 ZFProgressView,pageController,RESideMenu,MJRefresh,MBProgressHUD,RNFros ...

  3. Windows 系统下Vue的安装及环境搭建

    Hope to help those in need and those who use Vue for the first time. 1.获得并安装node.js.nodejs官网:https:/ ...

  4. SQL 视图 临时表 存储过程 索引 事务

    视图: 视图是按照你的sql语句生成的一个虚拟的东西,本身并不占数据库的空间 创建视图 create view view_1 as select id from table_1 当你表里的数据增加或者 ...

  5. NAT、端口映射、内网穿透、公网IP都是啥

    原文地址:https://wuter.cn/1756.html/ 一.IPv4地址 IP协议是为计算机网络相互连接进行通信而设计的协议,它是能使连接到网上的所有计算机网络实现相互通信的一套规则. 这里 ...

  6. （八）、rm--删除文件或者目录

    一.命令的描述与格式 永久地删除文件或者目录,此命令具有破坏性,一旦删除,没有备份,无法恢复 格式:rm  [选项]  文件或者目录 -d或者--directory                  ...

  7. （五）vimscript打印信息

    1.打印信息 使用vimscript时,打印信息的命令是echo和echom,可以通过help echo及help echom命令查看帮助文档,而echo与echom有些许的区别, :echom &q ...

  8. 将.Net Core发布至Docker，并连接 Redis、上传文件到本机、连接sqlserver数据库

    此片文章目标是将 .Net Core 发布到 Docker 上,并且连接到在 Docker上的 Redis .上传文件到本机文件夹和连接 sqlserver 数据库. 创建项目 创建项目就不用说了,我 ...

  9. 看了CopyOnWriteArrayList后自己实现了一个CopyOnWriteHashMap

    引言 面试官: 小伙子你有点眼熟啊,是不是去年来这面试过啊. 二胖: 啊,没有啊我这是第一次来这. 面试官: 行,那我们开始今天的面试吧,刚开始我们先来点简单的吧,java里面的容器你知道哪些啊,跟我 ...

  10. Java学习日报8.6

    <构建之法:现代软件工程>读后感 比起一般的教学类书籍,这本书更像是一本传记小说,作者邹欣以自己或者说一些典型的软件工程师为例子,详细介绍了一个软件工程师的工作内容,全书给我的感觉就是以一 ...