Estoy usando pestañas. Al seleccionar la pestaña, la posición de la pestaña activa se convierte en la pestaña central. Quiero cambiar el orden de todas las pestañas al seleccionar la pestaña central de cualquier orden, supongamos que el orden fue
1 2 3 4 5el nuevo orden será, al seleccionar la cuarta pestaña,
2 3 4 5 1Se aplicará un ciclo similar en la selección de cualquier pestaña. Mi código actual es
const tablist = document.querySelector(".tablist"), tabs = Array.from( tablist.querySelectorAll(".tabs")).sort((a,b) => getComputedStyle(a).order - getComputedStyle(b).order); //get proper initial order tablist.addEventListener("click", e => { if (!e.target.matches(".tabs")) return; for(let i = 0, order = 0, half = Math.round(tabs.length / 2); i < tabs.length; i++) { tabs[i].classList.toggle("tab-active", tabs[i] === e.target); tabs[i].style.order = (tabs[i] === e.target ? half : ++order == half ? ++order : order); } }); tablist.querySelector(".tab-active")?.click(); //initialize order .tablist { display: grid; } .tablist li.tab-active { font-weight: bold; } .tabs { cursor: pointer; user-select: none; } <ul class="tablist"> <li class="tabs">Marketing</li> <li class="tabs">Manufacturing</li> <li class="tabs tab-active" >Municipalities</li> <li class="tabs">Retail</li> <li class="tabs">Healthcare</li> </ul>Se supone que solo debo usar javascript no jquery o css para manejar el pedido.