自定义插件(Javascript)中的分页Wordpress

Question

嗨，我希望有人能帮忙。我正在构建一个wordpress插件。我只掌握了php的基本知识，我成功地构建了除分页之外的整个插件。我已经尝试了很多使用javascript的代码，但没有一个对我有效。我想用分页来划分项目

提前谢谢！

Answer 1

一个好的方法是将页面视为选项卡。然后，页面链接的行为将类似于根据单击的页面链接显示/隐藏的按钮。

下面是一个使用jQuery 的示例

// Add an event listener for when the page link is clicked
$('.page-link').on('click', function(){
// Save the page number that was clicked
var pageNum = $(this).data('page-id')
// Hide any open 'pages'
$('.page-content').hide();
// Find and show the selected page
$('[data-page=' + pageNum + ']'').show();
});

为了实现这一点，您需要一个类似的HTML结构

<!-- The Page Link -->
<div>
<ul>
<li class="page-link" data-page-id="1">Page 1</li>
<li class="page-link" data-page-id="2">Page 2</li>
<li class="page-link" data-page-id="3">Page 3</li>
</ul>
<!-- The Page Content -->
<div class="page-content" data-page="1" style="display: none;">
Page 1 content
</div> 
<div class="page-content" data-page="2"  style="display: none;">
Page 2 content
</div>    
<div class="page-content" data-page="3"  style="display: none;">
Page 3 content
</div>
</div>

这是一个超基础的jsfiddle