JSFiddle - React, Tailwind, and code Playground

HTML

<div class="post-content content_1">
جزء الموضوع الأول هنا
</div>
<div class="post-content content_2">
جزء الموضوع الثانى هنا
</div>
<div class="post-content content_3">
جزء الموضوع الثالث هنا
</div>

<p class='paging'/>

CSS

.post-content{display:none}.dblanter{font-size:130%;text-align:center}
.paging .tombol,.paging:before{font-size:14px;padding:8px 12px}
.paging{margin:20px auto;font-weight:bold;text-align:center;width:100%;font-family:Roboto,Arial,sans-serif}
.paging .tombol{font-weight:700;background:#2196f3;border-radius:5px;display:inline-block;width:25px;color:#fff;margin-right:5px;transition:ease .69s!important}
.tombol.blanter{background:#000}
@media screen and (max-width:768px){.paging .tombol,.paging:before{padding:8px 5px}}

JavaScript

function get_n(n) {
    var o, t, e = decodeURIComponent(window.location.search.substring(1)).split("&");
    for (t = 0; t < e.length; t++)
        if ((o = e[t].split("="))[0] === n) return void 0 === o[1] || o[1]
}
$(document).ready(function() {
    var n = get_n("n");
    $(".post-content").hide(), void 0 === n ? $(".content_1").show() : $(".content_" + n).show();
    var o = $(".post-content").length;
    if (0 != o)
      for (i = 1; i <= o; i++) {
            var t = window.location.pathname;
            $("p.paging").append($('<a href=' + t + '?n=' + i + ' class="tombol n' + i + '"> ' + i + ' </a>'))
        } else $("p.paging").hide();
    void 0 == n && $(".tombol.n1").toggleClass("blanter"), n == n && $(".tombol.n" + n).toggleClass("blanter")
});