javascript - Incorrect pathname of current url (without refreshing the page) when navigating through tabs using pagination php wordpress js

Question

I have several tabs on my custom blog page

<ul class="blog-tabs">
    <li>
        <a id="blog-cat-1" href="#all">All</a>
    </li>
    <li>
        <a id="blog-cat-2" href="#white"> White </a>
    </li>
    <li>
        <a id="blog-cat-3" href="#red"> Red</a>
    </li>
    <li>
        <a id="blog-cat-4" href="#green">Green</a>
    </li>
</ul>

For each of these categories, I implemented the pagination following this answer and since I have 4 tabs and content is loaded without refreshing the page, I implemented this logic 4 times but only by changing post_type and hash format on paginate_links

<?php 
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;

$data= new WP_Query(array(
    'post_type'=>'white',  )
    'posts_per_page' => 3, 
    'paged' => $paged,
));

if($data->have_posts()) :
    while($data->have_posts())  : $data->the_post();
            // My html code
    endwhile;

    $total_pages = $data->max_num_pages;

    if ($total_pages > 1){

        $current_page = max(1, get_query_var('paged'));

        echo paginate_links(array(
            'base' => get_pagenum_link(1) . '%_%',
            'format' => '/page/%#%#white',
            'current' => $current_page,
            'total' => $total_pages,
            'prev_text'    => __('« prev'),
            'next_text'    => __('next »'),
        ));
    }
    ?>    
<?php else :?>
<h3><?php _e('404 Error&#58; Not Found', ''); ?></h3>
<?php endif; ?>
<?php wp_reset_postdata();?>

I have a problem with pages. For example in tab All i have 1,2,3,4 pages while in tab White i have 1,2.

If I am in tab All in 4th page my url is: http://mysite/example/colors/page/4/#all

if I click on another tab that has fewer pages then 4 (in this case tab White) then the page isn't refreshed and it changes only the tab hash http://mysite/example/colors/page/4/#white and since there are only two pages with posts it shows nothing.

So I don't know what to do? Can someone help me, please?

标签： javascriptphpjquerywordpresspagination