JQuery 实现PPT效果，点跳目标页及翻页（待改进）

Posted Kikyo

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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‘);">一、目&nbsp;&nbsp;录</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"> 目&nbsp;&nbsp;录 </h1><br /><br /><br /><br />

                    <span>? &nbsp;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>? &nbsp;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>? &nbsp;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>? &nbsp;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效果，点跳目标页及翻页（待改进）的主要内容，如果未能解决你的问题，请参考以下文章

如何使用Bootstrap实现分页及翻页？Bootstrap实现分页的类都有哪些

节切换效果的原理及实现

Vue + ElementUI 之el-table的二次封装，带条件查询及翻页功能

关于scrollview的无限滚动效果实现

爬图交互界面及翻页初尝式

爬虫1：get请求的翻页及思考