Activate the tab in the center of the tab selection when clicked, utilizing either JavaScript or CSS

Question

Activate the tab in the center of the tab selection when clicked, utilizing either JavaScript or CSS

Attempting to display the active tab in the middle of a list of tabs using only pure javascript, without relying on the document.

List of Tabs:

.tablist li:nth-of-type(1) { order: 3; }
.tablist li:nth-of-type(2) { order: 2; }
.tablist li:nth-of-type(3) { order: 5; }
.tablist li:nth-of-type(4) { order: 4; }
.tablist li:nth-of-type(5) { order: 1; }
.tablist li.tabs.tab-active{ order: 3 !important }

<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>

Only successful with first 3 tabs, unable to position last 2 tabs correctly as they switch places at the end of the list.

Implementation is being done in Frontity, which does not support the use of document.

Attempted solutions using CSS, but no luck so far with javascript. Any assistance would be greatly appreciated.

javascript css tabs frontity

Answer 1

Answer №1

Check out this javascript implementation that updates the order of tabs when one is clicked.

const tablist = document.querySelector(".tablist"),
      tabs = Array.from( tablist.querySelectorAll(".tabs")).sort((a,b) => getComputedStyle(a).order - getComputedStyle(b).order); //establish 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 li:nth-of-type(1) { order: 3; }
.tablist li:nth-of-type(2) { order: 2; }
.tablist li:nth-of-type(3) { order: 5; }
.tablist li:nth-of-type(4) { order: 4; }
.tablist li:nth-of-type(5) { order: 1; }

.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">Retail</li>
  <li class="tabs tab-active">Municipalities</li>
  <li class="tabs">Healthcare</li>
</ul>

Answer 2

Check out this javascript implementation that updates the order of tabs when one is clicked.

const tablist = document.querySelector(".tablist"),
      tabs = Array.from( tablist.querySelectorAll(".tabs")).sort((a,b) => getComputedStyle(a).order - getComputedStyle(b).order); //establish 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 li:nth-of-type(1) { order: 3; }
.tablist li:nth-of-type(2) { order: 2; }
.tablist li:nth-of-type(3) { order: 5; }
.tablist li:nth-of-type(4) { order: 4; }
.tablist li:nth-of-type(5) { order: 1; }

.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">Retail</li>
  <li class="tabs tab-active">Municipalities</li>
  <li class="tabs">Healthcare</li>
</ul>

Activate the tab in the center of the tab selection when clicked, utilizing either JavaScript or CSS

Answer №1

Similar questions

Tips for enabling/disabling a Chrome extension through the utilization of local storage in the background page

Updating classes in a CSS style for a chosen item, and modifying additional classes for similar elements to match the selected one

Preventing the Vue compiler from managing static assets: A step-by-step guide

Utilize the $(#id).html(content) method to populate the following column with desired content

Tips on creating a responsive absolute div

Vue.js component mismatch in the layout

There is a missing dependency in the root installation of a custom node module

How can one get rid of a sudden strong beginning?

Safari is experiencing a unique DOM Exception 11 error when making XHR requests

Looking to execute a jQuery function as soon as the input value matches?

Fetch the Cart Id from the JSON response

What could be the reason for the failure of @babel/preset-react automatic transformation with Webpack?

Flexbox sets aside space for resized svg images

What is the best way to bring a list from one .js file into my main.js file?

What is the best method for fetching the values of a select element in React.js?

Tips for showing the previous value associated with a specified value in an array using JavaScript

Arrange the array to show 8 elements, ensuring to first review the likes object within the array

Creating several divs with an image tag within each div individually using Jade HTML pre-processor

What is the best way to include a new line or HTML code in this particular JavaScript function?

Disabling a button following a POST request