<!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. Kubernetes应用管理器OpenKruise之CloneSet

    OpenKruise OpenKruise 是 Kubernetes 的一个标准扩展,它可以配合原生 Kubernetes 使用,并为管理应用容器.sidecar.镜像分发等方面提供更加强大和高效的能 ...

  2. JIRA 知多少：聊一聊 Android Studio 、工作流相关设置

    Android Studio 相关 配置 JIRA 服务器 如果细心的话会发现有一个选项卡:Commit Message.这一段代码是不是有点熟悉呢?你没有猜错,这段代码就是 commit 模板,当你 ...

  3. JPA 复杂查询 - Querydsl

     添加依赖 <!--query dsl --> <dependency> <groupId>com.querydsl</groupId> <art ...

  4. [leetcode]725. Split Linked List in Parts链表分块

    思路很简单  按时链表的题做起来很容易犯小错误,思维要缜密 还要多练习啊 做之前最好画算法框图 public ListNode[] splitListToParts(ListNode root, in ...

  5. GraduateDesign-给APP添加获取位置信息和天气预报的功能(json)

    首先,我的app需要通过网络来获取当前所在的位置.这里我找到了一个json来获取本地位置信息. http://int.dpool.sina.com.cn/iplookup/iplookup.php?f ...

  6. Arduino IDE开发ESP8266-01S连接MQTT服务器 控制继电器点亮LED

    准备条件: 1.Arduino IDE 2.ESP-01S模块 2.MQTT服务器 3.手机热点或路由器热点 Wi-Fi芯片 默认订阅的主题是  "开关控制" 当你发送主题  &q ...

  7. 深入理解CSS盒模型【转载】

    下面本文章将会从以下几个方面谈谈盒模型. 基本概念:标准模型 和IE模型 CSS如何设置这两种模型 JS如何设置获取盒模型对应的宽和高 实例题(根据盒模型解释边距重叠) BFC(边距重叠解决方案) 基 ...

  8. tail常用命令总结

    tail命令作用: tail命令用途是依照要求将指定的文件的最后部分输出到标准设备,通常是终端,通俗讲来,就是把某个档案文件的最后几行显示到终端上,假设该档案有更新,tail会自己主动刷新,确保你看到 ...

  9. LInux之Shell工具：Cut、Sed、Awk、Sort

    一. cut cut的工作就是"剪",具体的说就是在文件中负责剪切数据用的.cut 命令从文件的每一行剪切字节.字符和字段并将这些字节.字符和字段输出. 1.基本用法 cut [选 ...

  10. Spark学习进度-Transformation算子

    Transformation算子 intersection 交集 /* 交集 */ @Test def intersection(): Unit ={ val rdd1=sc.parallelize( ...