JS / 在Blogger建立分頁

JS / 在Blogger建立分頁

Post Views: 1,251

Blogger沒有辦法用增加<!–nextpage–>的方式在文章內設定分頁

不過從股狗大神獲得的指示：可以在文章內執行Javascript程式來控制指定區塊的顯示或隱藏

原理是透過綁定click事件，來顯示指定的區塊

前往：莊生blogger

程式碼

  1. <div class=“content0”></div>
  2. <div class=“content1”>
  4. <!–第一頁的內容–>
  5. 第一頁的內容
  6. </div>
  7. <div class=“content2” style=“display: none;”>
  9. <!–第二頁的內容–>
  10. 第二頁的內容
  11. </div>
  12. <div class=“content3” style=“display: none;”>
  14. <!–第三頁的內容–>
  15. 第三頁的內容
  16. </div>
  17. <div class=“content4” style=“display: none;”>
  19. <!–第四頁的內容–>
  20. 第四頁的內容
  21. </div>
  22. <p>
  23. <b>Pages: <span style=“color: #3d85c6;”>
  24.   <a class=“page1” href=“#”>1</a>
  25.   <a class=“page2” href=“#”>2</a>
  26.   <a class=“page3” href=“#”>3</a>
  27.   <a class=“page4” href=“#”>4</a>
  28. </span>
  29. </b>
  30. </p>
  32. <script src=“//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script>
  33. <script>
  34. jQuery(document).ready(function(){
  35.   jQuery(‘.page1’).click(function(){
  36.     jQuery(‘html,body’).animate({ scrollTop: jQuery(‘.content0’).offset().top }, 600);
  37.     jQuery(‘.content1’).show();
  38.     jQuery(‘.content2’).hide();
  39.     jQuery(‘.content3’).hide();
  40.     jQuery(‘.content4’).hide();
  42.     return false;
  43.   });
  45. jQuery(‘.page2’).click(function(){
  46.   jQuery(‘html,body’).animate({ scrollTop: jQuery(‘.content0’).offset().top }, 600);
  47.     jQuery(‘.content1’).hide();
  48.     jQuery(‘.content2’).show();
  49.     jQuery(‘.content3’).hide();
  50.     jQuery(‘.content4’).hide();
  52.     return false;
  53.   });
  55. jQuery(‘.page3’).click(function(){
  56.   jQuery(‘html,body’).animate({ scrollTop: jQuery(‘.content0’).offset().top }, 600);
  57.     jQuery(‘.content1’).hide();
  58.     jQuery(‘.content2’).hide();
  59.     jQuery(‘.content3’).show();
  60.     jQuery(‘.content4’).hide();
  62.     return false;
  63.   });
  65. jQuery(‘.page4’).click(function(){
  66.   jQuery(‘html,body’).animate({ scrollTop:jQuery(‘.content0’).offset().top }, 600);
  67.     jQuery(‘.content1’).hide();
  68.     jQuery(‘.content2’).hide();
  69.     jQuery(‘.content3’).hide();
  70.     jQuery(‘.content4’).show();
  72.     return false;
  73.   });
  74. });
  75. </script>









	Tags: