<!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. 太酷炫了！！我会Python 导包八种方法，你呢？

    1. 直接 import 人尽皆知的方法,直接导入即可 >>> import os >>> os.getcwd() '/home/wangbm'复制代码 与此类似的 ...

  2. 【Python 1-8】Python手把手教程之——管理列表List

    遍历列表 在日常开发中,我们经常需要遍历列表的所有元素,对每个元素执行相同的操作.例如,在管理商场的蔬菜时候,需要给所有的蔬菜商品都打7折,并重新生成价格.当我们需要对列表中的每个元素都执行相同的操作 ...

  3. nacos注册中心源码流程分析

    作为一个注册中心,和eureka类似,核心的功能点: 1.服务注册:nacos客户端携带自身信息向nacos服务端进行注册. 2.服务心跳:客户端定时向服务端发送心跳,告知服务端自己处于可用状态 3. ...

  4. js中点回车enter触发事件&layui弹窗按enter键不停弹窗问题的解决&js实现鼠标焦点自动落到文本框(layui)

     js中回车触发事件 一. document.onkeydown = function (e) { // 回车提交表单 // 兼容FF和IE和Opera var theEvent = window.e ...

  5. Java通过IO流输出文件目录

    //通过IO流输出文件目录,不同级的目录之间用*间隔 1 package com.fjnu.io; 2 3 import java.io.File; 4 5 public class dicOut { ...

  6. Win10环境安装node.js和npm

    Node.js和npm的关系 Node.js是一个基于Chrome V8引擎的JavaScript运行环境,使用了事件驱动非阻塞式I/O模型. npm(Node Package Manager)是一个 ...

  7. JavaWeb基础总结：Filter专题

    Java Servlet Filter Filter 被称为过滤器,其主要作用是对 Servlet 容器调用 Servlet 的过程进行拦截,从而在 Servlet 进行响应处理的前后实现一些特殊功能 ...

  8. kill的使用

    Linux中Kill进程的N种方法 (2011-12-23 17:27:59) 转载▼ 标签: 杂谈 分类: ubuntu系统操作 常规篇: 首先,用ps查看进程,方法如下: $ ps -ef -- ...

  9. ThreadLocal源码深度剖析

    ThreadLocal源码深度剖析 ThreadLocal的作用 ThreadLocal的作用是提供线程内的局部变量,说白了,就是在各线程内部创建一个变量的副本,相比于使用各种锁机制访问变量,Thre ...

  10. Turtlebot3新手教程：OpenCR软件设置(shell)

    *本文针对如何利用脚本来更新固件进行讲解 具体步骤如下: burger的固件更新 $ export OPENCR_PORT=/dev/ttyACM0 $ export OPENCR_MODEL=bur ...