1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>JS实现幻动片选项卡</title> 6 </head> 7 <style> 8 .container{ 9 text-align:center; 10 width:100%; 11 } 12 13 .ppt{ 14 display:none; 15 padding:20px; 16 margin:0px; 17 color:white; 18 text-align:center; 19 height:200px; 20 } 21 .btn{/* 这部分可以改成小圆点、数字*/ 22 background-color: #555; 23 color: white; 24 float: left; 25 border: none; 26 outline: none; 27 cursor: pointer; 28 padding: 14px 16px; 29 font-size: 17px; 30 width: 25%; 31 32 } 33 .btn:hover { 34 background-color: #777; 35 } 36 37 </style> 38 <body> 39 <div class="container"> 40 41 42 <div id="test1" class="ppt" style="background:red"> 43 <h1> 44 幻动片1内容（这里可以先出任何你想要的代码） 45 </h1> 46 </div> 47 <div id="test2" class="ppt" style="background:black"> 48 <h1> 49 幻动片2内容（这里可以先出任何你想要的代码） 50 </h1> 51 </div> 52 <div id="test3" class="ppt" style="background:yellow"> 53 <h1> 54 幻动片3内容（这里可以先出任何你想要的代码） 55 </h1> 56 </div> 57 <div id="test4" class="ppt" style="background:green"> 58 <h1> 59 幻动片4内容（这里可以先出任何你想要的代码） 60 </h1> 61 </div> 62 <!--切换按钮--> 63 <button type="button" class="btn" id="defaultppt" οnclick="openppt('test1',this,'red')">幻动片1</button> 64 <button type="button" class="btn" οnclick="openppt('test2',this,'black')">幻动片2</button> 65 <button type="button" class="btn" οnclick="openppt('test3',this,'yellow')">幻动片3</button> 66 <button type="button" class="btn"οnclick="openppt('test4',this,'green')">幻动片4</button> 67 </div> 68 <script> 69 function openppt(pptname,elmnt,color) { 70 var i, ppt, btn; 71 //获得PPT并全隐藏 72 ppt = document.getElementsByClassName("ppt"); 73 for(var i=0;i<ppt.length;i++){ 74 ppt[i].style.display="none"; 75 } 76 //获取切换按钮并且赋值颜色与PPT一样 77 btn=document.getElementsByClassName("btn"); 78 for(var j=0;j<btn.length;j++){ 79 btn[j].style.background=""; 80 } 81 document.getElementById(pptname).style.display = "block"; 82 elmnt.style.backgroundColor = color; 83 84 } 85 // 触发 id="defaultppt" click 事件,第一张要显示出来 86 document.getElementById("defaultppt").click(); 87 </script> 88 </body> 89 </html>
JS原生选项卡 – 幻灯片效果
转载于:https://www.cnblogs.com/weblife/p/10265604.html
相关文章：
MSSQL 2008里事务的一个问题
今天在试MSSQL2008里的事务，发现如果事务中某条语句的表名错误，就无法用error或try回滚，具体如下：begin tran delete from test where id 5 --正确语句 dealete from testa where id1 4 --表名错误，testa 表…
避免在JSP中写java代码
作者：蜗牛学院CTO李懿老师 自从十年前的taglibs（如JSTL）和EL（表达语言，这些事情）诞生以来，在JSP中使用scriptlet（<% %>这些东西）的确是非常不鼓励的。 小脚本的主…
爱情也许是最忧伤的童话
也许爱情是一部忧伤的童话 惟其遥远与真实 惟其不可触摸与欠缺 方可成就起璀璨与神圣 或许，只有在难得最远的时候， 才能把曾经走过的那段日子 看得最真切、最清楚 放弃一个很爱你的人，并不痛苦 放弃一个你很爱的人，那才痛苦 爱…
Docker最全教程——从理论到实战（六）
Docker最全教程——从理论到实战（六） 原文:Docker最全教程——从理论到实战（六）托管到腾讯云容器服务 托管到腾讯云容器服务，我们的公众号“magiccodes”已经发布了相关的录屏教程，大家可以结合本篇教程一起…
c#中分割字符串的几种方法
第一种方法：打开vs.net新建一个控制台项目。然后在Main()方法下输入下面的程序。 string s"abcdeabcdeabcde"; string[] sArrays.Split(c); foreach(string i in sArray) Console.WriteLine(i.ToString()); 输出下面的结果:ab deab deab de 我们看到了结果…
对相机所看的视角截屏保存为图片
对相机所看的视角截屏保存为图片： 1 using UnityEngine;2 using System.Collections;3 using UnityEngine.UI;4 /// <summary>5 /// 对相机截图6 /// </summary>7 public class Jietu : MonoBehaviour {8 9 public Camera camera; 10 Texture2D…
fsum函数测试以及分析
#include <stdio.h> #include <stdlib.h> #include <string.h>#define BUFSIZE 256//这是一句预定义，定义BUFSIZE的值是100，是缓冲空间的大小,作为数组的。int main(int argc, char *argv[]) //第一个int argc，是记录你输入…
oracle学习总结二（转义字符）
1、oracle 特殊字符 转义关键词： oracle 转义 环境：oracle 9i plsql在plsql里边执行:update userinfo set pageurlmyjsp?page1&pagesize10 where idtest这条sql语句往数据库的pageurl字段放进去了一…
C语言——冒泡法排序应用
#include <stdio.h> #include <stdlib.h> int main()/*有int main 就会有return 0;如果是void main ,就不用加上return 0了 */ {int i,j,temp;/*待会要用到，所以先定义,因为输入的都是整数，所以用int整数型*/int a[10];/*定义一个一维整型数…
2017 Multi-University Training Contest 3 hdu 6063
HDU 6063 思路： AC代码： #include "iostream" #include "string.h" #include "stack" #include "queue" #include "string" #include "vector" #include "set" #include "m…
[学习]GridView 学习集合 -- GridView中使用超链接的技巧
GridView中使用超链接的技巧 数据绑定方式有两种，如下示例： Eval方式 ＜%# Eval("id") %＞ Bind方式 ＜%# Bind("id","~/info.aspx?id{0}") %＞ 推荐使用第一种方式，…
C# http 性能优化500毫秒到 60 毫秒
来源：https://www.cnblogs.com/hnsongbiao/p/9815808.html 偶然发现 C# 的 HttpRequest 要比 Chrome 请求同一Url 慢好多。C# HttpRequest 要500毫秒 而Chrome 只需要 39ms。 后来 整理 各种方法做了优化 HttpWebRequest request WebRequest.Create(address) as H…
一个计算机高手的成长(转)
这些日子我一直在写一个实时操作系统内核，已有小成了，等写完我会全部公开，希望能 够为国内IT的发展尽自己一份微薄的力量。最近看到很多学生朋友和我当年一样没有方向 ，所以把我的经历写出来与大家共勉，希望能给刚如行…
正则表达式整理
1.特殊字符 ^匹配输入字符串的开始位置$匹配输入字符串的结尾位置( )标记一个子表达式的开始和结束位置。子表达式可以获取供以后使用。要匹配这些字符，请使用 \( 和 \)。* 匹配前面的子表达式零次或多次。要匹配 * 字符，请使用 \*。匹配前面的子表达式一…
CSS-hover
1. padding:0 10px; 表示上下边距是0，左右边距是10. 2. padding:0 10px 0 10px； 上-右-下-左。（顺时针方向） 3. .pg-header .menu:hover； 表示只要鼠标移动到当前标签上时，就会应用这个下面所定义的样式。 …
Error原生类型
•表示错误对象 –EvalError, URIError, RangeError, etc. •捕获方式： –try { …throw new Error(…) } catch(e) { … } –理论上可以throw出任意对象 •Error对象IE和FireFox公有属性 –message：错误信息Error浏览器特定属性 •IE： –des…
求矩阵两条对角线元素之和
#include <stdio.h> #include <stdlib.h>int main() {int a[3][3];//定义一个二维数组，三行三列，a[0][0],a[0][1],a[0][2],a[1][0],a[1][1],a[1][2],a[3][0],a[3][1],a[3][2]int i,j,sum0;printf("请输入9个数据给数组赋值:\n");f…
关于Java中各种修饰符与访问修饰符的说明
关于Java中各种修饰符与访问修饰符的说明 类： 访问修饰符 修饰符 class 类名称extends 父类名称 implement 接口名称 （访问修饰符与修饰符的位置可以互换）访问修饰符 名称 说明 备注 public可以被所有类访问（使用࿰…
buffer IO和direct IO
最近在看很多框架，redis，kafka等底层都涉及到文件IO操作的效率问题，所以查了些资料，看到这篇文章讲的比较明白些，贴出来留存。 链接地址： https://www.ibm.com/developerworks/cn/linux/l-cn-directio/转载…
python 列表使用
下面实现的类似于java中的数组： names[-2]表示实现倒数的第2个参数 names[-3,-1]表示实现-3到-1的值不包含-1 增删改查 下面代码实现列表的增删改查功能： 复制copy 深copy:这个可以copy全部的参数列表（一般不用）。 For循环打印列表…
c语言——求单词个数
#include <stdio.h> #include <stdlib.h>int main() {char str[20];//定义一个字符型一维数组，长度为20int i,num;printf("请输入一行英文:\n");//提示语句gets(str);//输入一个字符串给字符数组strnum str[0]! ? 1:0;//? : 是条件运算符…
C# 各种进制之间相互转换 [ZT]
MessageBox.Show(Convert.ToString(12345, 2)); //10进制转换为2进制MessageBox.Show(Convert.ToString(12345, 8)); //10进制转换为8进制MessageBox.Show(Convert.ToString(12345, 16)); //10进制转换为16进制MessageBox.Show(Convert.ToInt32("1100", 2).ToStri…
慕课《深入理解计算机系统》袁林枫老师章节测试1-9
1以下有关冯.诺依曼结构思想的叙述中，错误的是（ C ）。 A.计算机内部以二进制形式表示指令和数据 B.程序由指令构成，计算机能自动执行程序中一条一条指令 C.指令和数据都放在存储器中，两者在形式上有差别（…
WCF 和 ASP.NET Web API
地址：https://docs.microsoft.com/zh-cn/dotnet/framework/wcf/wcf-and-aspnet-web-api WCF 是 Microsoft 为生成面向服务的应用程序而提供的统一编程模型。 借助这一模型，开发人员可以构建既能跨平台与现有投资集成又能与现有投资交互的安全、可靠的事务…
php中操作mysql的函数库
发现php中的mysql库是一个函数库 而不是一个类库 使用面向过程的形式组织。mysql_affected_rows -- 取得前一次 MySQL 操作所影响的记录行数 mysql_change_user -- 改变活动连接中登录的用户 mysql_client_encoding -- 返回字符集的名称 mysql_close -- 关闭 MySQL 连接 mysq…
Firetruck UVA - 208
DFS并查集 如果只用DFS的话会超时，用并查集剪枝，和起点终点不联通的点就不用跑了 这题有好多人写了博客，但是我觉得我的代码写的比较通俗易懂所以就贴上来了，我觉得我写代码的目标就是让任何人都能看懂，越小白越好&…
MCSE2003学习之三
安装ＷＩＮ ＸＰＸＰ的系统中，３２位的系统最大支持的ＲＡＭ为４Ｇ，而６４位的…
【LeetCode】230#二叉搜索树中第K小的元素
题目描述 给定一个二叉搜索树，编写一个函数 kthSmallest 来查找其中第 k 个最小的元素。 说明： 你可以假设 k 总是有效的，1 ≤ k ≤ 二叉搜索树元素个数。 示例 1: 输入: root [3,1,4,null,2], k 13/ \1 4\2 输出: 1 示例 2: 输入: root …
runaway深度递归函数测试及相关汇编指令
这是一个深度递归的例子。 #include <stdio.h> #include <stdlib.h>int recurse(int x) {int a[1<<15]; /* 4 * 2^15 64 KiB */printf("x %d. a at %p\n", x, a); a[0] (1<<14)-1;a[a[0]] x-1;if (a[a[0]] 0)return -1;return rec…
codeforce843B Interactive LowerBound
题意：交互式的题，给你n,s, x，链表元素有n个，开始的位置是s，每次询问输入数组的下标，可以知道对应链表上的数和链表下一个数的位置，只能询问2000次，要找到第一个大于等于x的数 题解&a…