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

时间：2019-11-11 18:38:37 阅读：73 评论：0 收藏：0 [点我收藏+]

标签：charset font type site script ref fine break click

实现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>

标签：charset font type site script ref fine break click

原文地址：https://www.cnblogs.com/kikyoqiang/p/11837164.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行