I found this navigation tab style that I really like...but I am not a css guru. https://codepen.io/markcaron/pen/MvGRYV

css tabs

It uses radio and label tags and I am having a challenging time converting it to something I am more familiar with seeing in the structure of ul and li tags. I want the links to go to a web page and not toggling to contents within the same page.

• Some Thing
• Some Thing 2
• Some Thing 3
• Some Thing 4

Any guidance or help is much appreciated.

CodePudding user response：

The technique is quite simple: Every <li> needs to have a border-bottom. When you select that <li>, you add the border to all 4 directions and remove the border-bottom:

// JS is only needed when be used on the same site, otherwise hardcode the class to the correct li
let list_items = document.querySelectorAll('menu li');
list_items.forEach(el =>
  el.addEventListener('click', function(e) {
    list_items.forEach(list => list.classList.remove('active'));
    e.currentTarget.classList.add('active');
  })
)

menu {
  padding-left: 0;
  display: flex;
}

menu > li {
  list-style: none;
  padding: 1em;
}

menu > li {
  border-bottom: 1px solid gray;
  cursor: pointer;
}

/* class that needs to be added to the li that is active / checked / selected */
.active {
  border: 1px solid gray;
  border-bottom: none;
}


/* only for demonstration purpose */
a {
  pointer-events: none;
}

<nav>
  <menu>
    <li ><a href="">Link 1</a></li>
    <li><a href="">Link 2</a></li>
    <li><a href="">Link 3</a></li>
  </menu>
</nav>