JQuery 实现PPT效果，点跳目标页及翻页（待改进）
实现PPT效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>test 10</title>
<style>
.container {
width: 100%;
height: 100%;
} .contentDiv {
margin: 20px auto;
width: 100%;
height: 1200px;
} .contentDiv2 span {
font-size: 30px;
text-align: left;
} .leftDiv {
width: 20%;
height: 100%;
display: inline;
float: left;
} .rightDiv {
width: 80%;
height: 100%;
display: inline;
float: left;
} .title2 {
font-size: 40px;
text-align: center;
font-weight: bold;
} .contentDiv2 {
display: none;
} #mulu span {
font-size: 30px;
} .listFontSize {
font-size: 20px;
} a:link {
font-size: 20px;
color: #000000;
text-decoration: none;
} a:visited {
font-size: 20px;
color: #000000;
text-decoration: none;
} a:hover {
font-size: 20px;
color: #000000;
text-decoration: none;
} .container {
background-color: lightgray;
}
</style>
</head>
<body> <div class="container"> <div class="leftDiv">
<a href="#" id="" onclick="Show('step1');">一、目 录</a> <br />
<a href="#" id="" onclick="Show('step2');"><span class="listFontSize">1、评估原则</span></a> <br />
<a href="#" id="" onclick="Show('step3');"><span class="listFontSize">2、评估方法</span></a> <br />
<a href="#" id="" onclick="Show('step4');"><span class="listFontSize">3、评估指标</span></a> <br />
<br /><br /><br /><br /><br /><br /><br /><br /> <a href="#" id="previousStep">上一页</a> <br />
<a href="#" id="nextStep">下一页</a> <br />
</div> <div class="rightDiv"> <div>
<div id="mulu" class="step step1" style="text-align:left">
<br /><br /><h1 class="title2" style="font-size:50px"> 目 录 </h1><br /><br /><br /><br /> <span>▶ 1111111111111111111111 </span><br /><br />
</div>
</div> <div>
<div class="contentDiv2 step step2">
<br /><br /><div style="text-align:center"><label class="title2"> 评估原则 </label></div><br /><br /><br /><br />
<span>▶ 22222222222222 </span><br /><br />
</div>
</div> <div>
<div class="contentDiv2 step step3">
<br /><br /><div style="text-align:center"><label class="title2"> 评估方法 </label></div><br /><br /><br /><br />
<span>▶ 3333333333333333333 </span><br /><br />
</div>
</div> <div>
<div class="contentDiv2 step step4">
<br /><br /><div style="text-align:center"><label class="title2"> 评估指标 </label></div><br /><br /><br /><br />
<span>▶ 4444444444444444444 </span><br /><br /> </div>
</div> </div> </div> <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<!--<script src="../../Script/plugins/jquery/jquery-1.9.1.min.js"></script>-->
<script>
$(function () {
$("#previousStep").click(function () {
previousStepclick();
}); $("#nextStep").click(function () {
nextStepclick();
});
}); function previousStepclick() {
stepFunc("prev");
} function nextStepclick() {
stepFunc("next");
} function stepFunc(prevOrNext) {
var steps = $(".step");
for (var i = 0; i < steps.length; i++) {
var step = steps[i];
var b1 = $(step).is(":hidden");
if ($(step).is(":hidden")) { } else {
var e;
if (prevOrNext == "prev") {
e1 = $(step).parent().prev().children(".step")[0];
}
else if (prevOrNext == "next") {
e1 = $(step).parent().next().children(".step")[0];
}
if (typeof (e1) != 'undefined') {
$(step).hide();
$(e1).show();
break;
}
}
}
} function Show(step) {
$(".step").each(function () {
$(this).hide();
});
$("." + step).show();
} </script>
</body>
</html>
JQuery 实现PPT效果，点跳目标页及翻页（待改进）的更多相关文章
- 第十二篇、OC_仿淘宝商品详情页的翻页
// // GFBProductViewController.m // elmsc // // Created by MAC on 2016/11/26. // Copyright © 2016年 G ...
- DEDEcms手机网站添加详情内页上一页/下一页的翻页功能
修改文件include/arc.archives.class.php文件. 1.搜索 function GetPreNext($gtype='') 2.将这个函数的所有内容替换为 function G ...
- 10款无限滚动自动翻页jquery插件
2012年3月29日 无限滚动自动翻页可以说是web2.0时代的一项堪称伟大的技术,它让我们在浏览页面的时候只需要把滚动条拉到网页底部就能自动显示下一页的 结果,改变了一直以来只能通过点击下一页来翻页 ...
- Android 滑动效果高级篇（七）—— 华丽翻页效果
By 何明桂(http://blog.csdn.net/hmg25) 转载请注明出处 之前看到像ipad上的ibook的模拟书籍翻页的特效感觉很炫,在android上也有像laputa和ireader ...
- HTML5 book响应式翻页效果
翻页,HTML5源码下载,HTML5响应式翻页效果,鼠标移到右上角会看到翻页效果,需要鼠标拖动后翻页,支持ie9+,html5浏览器. 单页和双页. 自动播放和暂停. 点击左右翻页. 鼠标点击左右页面 ...
- c#翻页效果
用c#和GDI+实现杂志翻页动画效果时间:2010-01-13 blog.csdn.net 周公 - 说明:以前本人参与个一个电子杂志项目,当时要求实现模拟现实生活中的杂志翻页动画效果,别人推荐了这篇 ...
- 6个超炫酷的HTML5电子书翻页动画
相信大家一定遇到过一些电子书网站,我们可以通过像看书一样翻页来浏览电子书的内容.今天我们要分享的HTML5应用跟电子书翻页有关,我们精选出来的6个电子书翻页动画都非常炫酷,而且都提供源码下载,有需要的 ...
- gridView AspNetPager 翻页时 弹出窗体关闭报错
gridView AspNetPager 翻页后,你右击刷新或F5会发现弹出一个刷新页面. 这是因为默认翻页都是用dopostback方式回发的.因为这时的页面已经不是原来的页面.所以会弹出提示. 这 ...
- 使用Python在自己博客上进行自动翻页
先上一张代码及代码运行后的输出结果的图! 下面上代码: # coding=utf-8 import os import time from selenium import webdriver #打开火 ...
随机推荐
- dubbo+zookeeper搭建笔记
参考博客: http://blog.csdn.net/u013142781/article/details/50396621#reply http://blog.csdn.net/u013142781 ...
- Laravel 图片无法显示的问题
无法显示图片 先跳转到指定目录 mklink /d storage d:\www\dev.hanwen.com\storage\app
- 你知道for(;;) vs. while(true)那个更快吗？
来来来, for(;;) vs. while(true) 有什么区别?从java的语义上来说,他们是一模一样的.为何怎么说? 开始我们先测试for(;;) package com.tony.test; ...
- 避坑之Hadoop安装伪分布式(Hadoop3.2.0/Ubuntu14.04 64位)
一.安装JDK环境(这个可以网上随意搜一篇教程了照着弄,这里不赘述) 安装成功之后 输入 输入:java -version 显示如下说明jdk安装成功(我这里是安装JDK8) 二.安装Hadoop3. ...
- UDP协议 sendto 和 recvfrom 浅析与示例
UDP(user datagram protocol)用户数据报协议,属于传输层. UDP是面向非连接的协议,它不与对方建立连接,而是直接把数据报发给对方.UDP无需建立类如三次握手的连接,使得通信效 ...
- The Preliminary Contest for ICPC Asia Xuzhou 2019 M. Longest subsequence（思维+序列自动机）
序列自动机跑s串 假设k为s和t相同的长度,初始时相同长度为0 取s串中大于t[i]的最左边的位置,用n-tmp+1+i-1更新答案,tmp是最左端的位置 然后去t[i]相等的位置,走到下一位,如果下 ...
- 【代码学习】PYTHON 进程
一.进程和程序的区别 编写完毕的代码,在没有运行的时候称之为程序 正在运行的代码,称之为进程 进程除了包含的代码意外,还需要运行的环境等 二.fork import os import time # ...
- ACL与OSPF综合实验
OSPF与ACL 综合实验 拓扑图如下: 分析: 配置基本配置: R1: R2: R3: 2.配置OSPF: R1: R2: R3: IT: 设置IT的ip 并划分到ospf2区域 3.配置ACL ...
- wordpress 不用插件添加友情链接
哎,也不知道为啥,网上说的那个link manager这个插件死活找不到啊, 找了一个类似的,但是不是,这么多的英文看了好几遍才发现不是 然后从大神哪里找到一个好方法 在你用的那个主题的functio ...
- VMware安装EVE
众所周知,EVE是一个非常强大的仿真环境,能给我们学习带来很大的帮助,这里主要简单记录一下安装在VMware下安装EVE的过程. 1.准备: 我安装的VMware是WORKSTATION 12 PRO ...