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