JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<style>
.content { visibility: none }
</style>
<script>
$(document).ready(() => {
var query = new URLSearchParams(window.location.search )
route = query.get("route")
anchor = document.URL.match(/#[^\?]+/)
$(".router").each( (i,e) => {
var query = new URLSearchParams( e.attributes.href.value )
$(e).addClass(query.get("route"))
})
$(".selector").each((i,e) => $(e).addClass($(e).attr("href").substr(1)))
$(".selector").click( function(e) {
e.preventDefault()
history.pushState({} ,"", "" + $(this).attr("href"));
anchor = $(this).attr("href").replace(/\?.*/,"");
({
"#subroute1" : console.log,
"#subroute2": (e) => alert(e),
"#subroute3" : console.log,
"#subroute4": (e) => alert(e) })[anchor](anchor)
console.log("subroute called:" + anchor)
return true
})
$(".router").click( (e) => {
e.preventDefault()
var href=$(e.target)[0].attributes.href
url = href.value
if (anchor)
url += anchor
history.pushState({}, null, url)
var query = new URLSearchParams( href.value )
var route = query.get("route");
({
"route1": () => { $(".content").hide(); $("." + route).show() },
"route2": () => { $(".content").hide(); $("." + route).show() },
"route3": () => { $(".content").hide(); $("." + route).show() },
})[route]()
console.log("route called:" + route)
return true
})
if (route == undefined ) {
console.log("default route")
$(".router.route1").click()
} else {
console.log('dealing with: ' +route +':'+ anchor)
$(".router" + "." + route).click()
console.log("hog beteween here and latest log")
}
anchor = document.URL.match(/#[^\?]+/)
if (anchor) {
console.log("anchor detected...