<main>
  <ul role="tablist">
    <li role="presentation">
      <a href="#section1" role="tab" id="tab1" aria-selected="true">Section 1</a>
    </li>
    <li role="presentation">
      <a href="#section2" role="tab" id="tab2" tabindex="-1">Section 2</a>
    </li>
    <li role="presentation">
      <a href="#section3" role="tab" id="tab3" tabindex="-1">Section 3</a>
    </li>
  </ul>
  <section id="section1" role="tabpanel" aria-labelledby="tab1" aria-hidden="false" tabindex="-1">
    <h2>Section 1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dui nibh, fermentum ac gravida quis, <a href="#">tempus sit</a> amet nulla. Fusce dignissim dolor sit amet sapien auctor, eu vehicula elit placerat. Aliquam vehicula luctus enim, at ullamcorper risus. Aliquam ut tincidunt ipsum. Vivamus dui mi, suscipit vitae libero id, interdum aliquet metus.</p>
  </section>
  <section id="section2" role="tabpanel" aria-labelledby="tab2" aria-hidden="true" tabindex="-1" hidden>
    <h2>Section 2</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dui nibh, fermentum ac gravida quis, <a href="#">tempus sit</a> amet nulla. Fusce dignissim dolor sit amet sapien auctor, eu vehicula elit placerat. Aliquam vehicula luctus enim, at ullamcorper risus. Aliquam ut tincidunt ipsum. Vivamus dui mi, suscipit vitae libero id, interdum aliquet metus.</p>
  </section>
  <section id="section3" role="tabpanel" aria-labelledby="tab3" aria-hidden="true" tabindex="-1" hidden>
    <h2>Section 3</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dui nibh, fermentum ac gravida quis, <a href="#">tempus sit</a> amet nulla. Fusce dignissim dolor sit amet sapien auctor, eu vehicula elit placerat. Aliquam vehicula luctus enim, at ullamcorper risus. Aliquam ut tincidunt ipsum. Vivamus dui mi, suscipit vitae libero id, interdum aliquet metus.</p>
  </section>
</main>
body {
  font-family: Roboto,"Helvetica Neue",Arial,sans-serif;
}
main {
  max-width: 35rem;
  margin: 1rem auto;
}
[role="tablist"] {
  padding: 0;
  margin: 0;
}
[role="tablist"] li, [role="tablist"] a {
  display: inline-block;
}
[role="tablist"] a {
  padding: 0.5rem;
  text-decoration: none;
}
[role="tablist"] [aria-selected] {
  border: 2px solid black;
}
[role="tabpanel"] {
    border: 2px solid;
    padding: 1.5rem;
}
const tablist = document.querySelector("ul[role='tablist']");
const tabs = Array.from(tablist.querySelectorAll("a"));
const panels = document.querySelectorAll("section[role='tabpanel']");

const LEFT_ARROW = 37;
const RIGHT_ARROW = 39;
const DOWN_ARROW = 40;

tabs.forEach(function (tab, i) {
  tab.addEventListener("click", (e) => {
    e.preventDefault();
    let currentTab = tablist.querySelector("[aria-selected]");
    if (e.currentTarget !== currentTab) {
      switchTab(currentTab, e.currentTarget);
    }
  });

  tab.addEventListener("keydown", (e) => {
    const index = tabs.indexOf(e.currentTarget);

    if (e.keyCode === DOWN_ARROW) {
      e.preventDefault();
      panels[i].focus();
    }

    if (e.keyCode === LEFT_ARROW) {
      e.preventDefault();
      if (tabs[index - 1]) {
        switchTab(e.currentTarget, tabs[index - 1]);
      }
    }

    if (e.keyCode === RIGHT_ARROW) {
      e.preventDefault();
      if (tabs[index + 1]) {
        switchTab(e.currentTarget, tabs[index + 1]);
      }
    }
  });
});

const switchTab = (oldTab, newTab) => {
  newTab.focus();
  newTab.removeAttribute("tabindex");
  newTab.setAttribute("aria-selected", "true");

  oldTab.removeAttribute("aria-selected");
  oldTab.setAttribute("tabindex", "-1");

  panels[tabs.indexOf(oldTab)].hidden = true;
  panels[tabs.indexOf(newTab)].hidden = false;
};

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.