fix(district): geo feature collection navigation from category listing

district/templates/district/district_geo_feature_collection_page.html

@@ -79,9 +79,9 @@
                   {% for feature in features %}
                     <li>
                         <span class="rounded-full inline-flex items-center justify-center bg-grey-125 font-bold text-center text-xs w-5 h-5 mr-2 no-underline">
-                          <a href="#{{feature.pk}}-{{feature.slug}}" class="no-underline">{{ feature.index }}</a>
+                          <a href="?item={{feature.pk}}-{{feature.slug}}" class="no-underline js-feature-item-anchor">{{ feature.index }}</a>
                         </span>
-                        <a href="#{{feature.pk}}-{{feature.slug}}"><span class="text-sm underline">{{ feature.title }}</span></a>
+                        <a href="?item={{feature.pk}}-{{feature.slug}}" class="js-feature-item-anchor"><span class="text-sm underline">{{ feature.title }}</span></a>
                       </a>
                     </li>
                   {% endfor %}
@@ -109,3 +109,24 @@
     </div>
   </article>
 {% endblock %}
+
+
+{% block scripts %}
+<script>
+  /* Handle .js-feature-item-anchor clicks without page reloads. */
+  Array.from(document.getElementsByClassName("js-feature-item-anchor")).forEach((el) => {
+    el.addEventListener("click", (evt) => {
+      evt.preventDefault();
+      const url = new URL(window.location);
+
+      // Set slug from URL.
+      url.searchParams.set("item", el.getAttribute("href").substring(6));
+
+      // Emulate user browser navigation event.
+      history.pushState({}, "", url);
+      window.dispatchEvent(new Event("popstate"));
+      return false;
+    })
+  })
+</script>
+{% endblock %}