代码如下





<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<style>

    body {font-family: "Lato", sans-serif;}

    /* Style the tab */

    div.tab {

        overflow: hidden;

        border: 1px solid #ccc;

        background-color: #f1f1f1;

    }

    /* Style the buttons inside the tab */

    div.tab button {

        background-color: inherit;

        float: left;

        border: none;

        outline: none;

        cursor: pointer;

        padding: 14px 16px;

        transition: 0.3s;

        font-size: 17px;

    }

    /* Change background color of buttons on hover */

    div.tab button:hover {

        background-color: #ddd;

    }

    /* Create an active/current tablink class */

    div.tab button.active {

        background-color: #ccc;

    }

    /* Style the tab content */

    /*.tabcontent {*/

        /*display: none;*/

        /*padding: 6px 12px;*/

        /*border: 1px solid #ccc;*/

        /*border-top: none;*/

    /*}*/

    /* Style the tab content */

    .tabcontent {

        display: none;

        padding: 6px 12px;

        -webkit-animation: fadeEffect 1s;

        animation: fadeEffect 1s;

    }

    /* Fade in tabs */

    @-webkit-keyframes fadeEffect {

        from {opacity: 0;}

        to {opacity: 1;}

    }

    @keyframes fadeEffect {

        from {opacity: 0;}

        to {opacity: 1;}

    }

</style>

<body>

<p>点击各个选项卡查看内容:</p>

<div class="tab">

    <button id="defaultOpen" class="tablinks" onclick="openCity(event, 'London')">London</button>

    <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>

    <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>

</div>

<div id="London" class="tabcontent">

    <h3>London</h3>

    <p>London is the capital city of England.</p>

</div>

<div id="Paris" class="tabcontent">

    <h3>Paris</h3>

    <p>Paris is the capital of France.</p>

</div>

<div id="Tokyo" class="tabcontent">

    <h3>Tokyo</h3>

    <p>Tokyo is the capital of Japan.</p>

</div>

</body>

</html>

<script>

    function openCity(evt, cityName) {

        var i, tabcontent, tablinks;

        //所有tab-content移除block效果，tab-links先移除active。

        tabcontent = document.getElementsByClassName("tabcontent");

        for (i = 0; i < tabcontent.length; i++) {

            tabcontent[i].style.display = "none";

        }

        tablinks = document.getElementsByClassName("tablinks");

        for (i = 0; i < tablinks.length; i++) {

            tablinks[i].className = tablinks[i].className.replace(" active", "");

        }

        //根据字符串把对应的tab-content和tab-links加上效果。

        document.getElementById(cityName).style.display = "block";

        evt.currentTarget.className += " active";

//        tabcontent[i].style.display = "none";

    }

    // 触发 id="defaultOpen" click 事件,默认让第I一个tabcontent显示。

    document.getElementById("defaultOpen").click();

//    var tabcontent = document.getElementsByClassName("tabcontent");

//    tabcontent[0].style.display = "block";

//

//    var tablinks = document.getElementsByClassName("tablinks");

//    tablinks[0].className += " active";

</script>






 




二.淡入弹出效果


如果要淡入弹出的动画效果。则把上面的tabcontent样式加上animation属性。并加上动画的效果fadeEffect定义。


/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    -webkit-animation: fadeEffect 1s;
    animation: fadeEffect 1s;
}

/* Fade in tabs */
@-webkit-keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}
												


											
js 淡入淡出的tab选项卡的更多相关文章
	

    
								
  1. js 淡入淡出的图片
		
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
    
		
    2. 
						
  2. js淡入淡出
		
    示例: js淡入淡出 原理:更改css不透明数值 知识点: css不透明 filter:alpha(opacity:30); opacity:0.3;} 小技巧: 小于临界值,做加速 大于临界值,做减 ...
    
		
    3. 
						
  3. ExtJS简单的动画效果2（ext js淡入淡出特效）
		
    Ext 开发小组则提供了 Fx 类集中处理了大部分常用的 js 动画特效,减少了我们自己手写代码的复杂度. 面我给出一个简单的实例代码,其中囊括了大部分的 Ext 动画效果: (注意导入js和css文 ...
    
		
    4. 
						
  4. DOM操作相关案例 模态对话框,简易留言板,js模拟选择器hover,tab选项卡,购物车案例
		
    1.模态框案例 需求: 打开网页时有一个普通的按钮,点击当前按钮显示一个背景图,中心并弹出一个弹出框,点击X的时候会关闭当前的模态框 代码如下: <!DOCTYPE html> <h ...
    
		
    5. 
						
  5. js和jquery实现tab选项卡
		
    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
    
		
    6. 
						
  6. ExtJS简单的动画效果（ext js淡入淡出特效）
		
    1.html页面:Application HTML file - index.html <html> <head> <title>ExtJs fadeIn() an ...
    
		
    7. 
						
  7. tab选项卡-jQuery
		
    上次用原生的js写了个tab选项卡   这次按照一样的思路用jQuery写了一个 ,直接看代码: /*布局*/ <div id="div1"> <input cl ...
    
		
    8. 
						
  8. 前端设计——js实现图片切换的淡入淡出
		
    1.网页结构如图所示 2.页面布局设计细节 ①分块:一个小方块是一个div. ②无序列表一般是竖直排放的,可以通过float让其水平排放.float:left; ③三个小方块是浮动上去的,所以要用到p ...
    
		
    9. 
						
  9. js基础练习一之tab选项卡
		
    最近在学习前端,当然包括js,css,html什么的,在听课时做的一些小练习,记录下来: 实例一: --Tab选项卡-- <script type="text/javascript&q ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 这是一个测试  hello world
			
    第一次写博客,冒着生命危险尝试一下,发说说 搞了半天,发现原创文章在随笔发,我以为在文章目录发,白白在文章那里建了分类,太难了吧我
    
			
    2. 
						
  2. 华为云OCR文字识别 免费在线体验！
			
    嘿,华为云OCR文字识别了解一下,免费在线体验! 物流行业快速提取运单信息.医疗/保险行业单据快速录入.政务办事人证检验,你知道这些都是如何实现的么? 答案就是:OCR文字识别! 作为AI时代效率倍增 ...
    
			
    3. 
						
  3. [Abp vNext 源码分析] - 13. 本地事件总线与分布式事件总线 (Rabbit MQ)
			
    一.简要介绍 ABP vNext 封装了两种事件总线结构,第一种是 ABP vNext 自己实现的本地事件总线,这种事件总线无法跨项目发布和订阅.第二种则是分布式事件总线,ABP vNext 自己封装 ...
    
			
    4. 
						
  4. es6 proxy浅析
			
    Proxy 使用proxy,你可以把老虎伪装成猫的外表,这有几个例子,希望能让你感受到proxy的威力. proxy 用来定义自定义的基本操作行为,比如查找.赋值.枚举性.函数调用等. proxy接受 ...
    
			
    5. 
						
  5. hdu5969最大的位或
			
    题目:http://acm.hdu.edu.cn/showproblem.php?pid=5969 题意:给定自然数l和r ,选取2个整数x,y,满足l <= x <= y <= r ...
    
			
    6. 
						
  6. Mysql基础02-约束
			
    约束与索引 概念 1.数据完整性(Data Integrity)是指数据的精确性(Accuracy)和可靠性(Reliability). 实体完整性(Entity Integrity):例如,同一个表 ...
    
			
    7. 
						
  7. 聊聊技术选型 - Angular2 vs Vue2
			
    作者介绍:李旸,美团点评前端工程师,3 年 Web 前端开发经验,现在是美团点评点餐团队的一员. "Come, and take choice of all my library, And  ...
    
			
    8. 
						
  8. JAVA 使用jgit管理git仓库
			
    最近设计基于gitops新的CICD方案,需要通过java读写git仓库,这里简单记录下. JGit是一款pure java的软件包,可以读写git仓库,下面介绍基本使用. 引入jgit maven引 ...
    
			
    9. 
						
  9. 为什么要使用Unix时间戳
			
    概念: UNIX时间戳:Unix时间戳(英文为Unix epoch, Unix time, POSIX time 或 Unix timestamp) 是从1970年1月1日(UTC/GMT的午夜)开始 ...
    
			
    10. 
						
  10. 《Java基础知识》Java static关键字以及Java静态变量和静态方法
			
    static 修饰符能够与变量.方法一起使用,表示是“静态”的. 静态变量和静态方法能够通过类名来访问,不需要创建一个类的对象来访问该类的静态成员,所以static修饰的成员又称作类变量和类方法.静态 ...
    
			
    11.