2024/02/29

JS / 在Blogger建立分頁

Blogger沒有可以增加<!--nextpage-->的方式來在文章內設定分頁

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

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

第一頁的內容

Pages: 1 2 3 4


程式碼  

  1. <div class="content0"></div>
  2. <div class="content1">
  3.  
  4. <!--第一頁的內容-->
  5. 第一頁的內容
  6. </div>
  7. <div class="content2" style="display: none;">
  8.  
  9. <!--第二頁的內容-->
  10. 第二頁的內容
  11. </div>
  12. <div class="content3" style="display: none;">
  13.  
  14. <!--第三頁的內容-->
  15. 第三頁的內容
  16. </div>
  17. <div class="content4" style="display: none;">
  18.  
  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>
  31.  
  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();
  41.  
  42. return false;
  43. });
  44.  
  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();
  51.  
  52. return false;
  53. });
  54.  
  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();
  61.  
  62. return false;
  63. });
  64.  
  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();
  71.  
  72. return false;
  73. });
  74. });
  75. </script>

0 comments:

張貼留言