JSFiddle - React, Tailwind, and code Playground

by CSS_Apprentice

HTML

<ul>
  <li class="one">Button 1</li>
  <li class="two">Button 2</li>
  <li class="three">Button 3</li>
  <li class="four">Button 4</li>
</ul>

<div class="active" id="one">
  <p>Filler text for div one</p>
</div>

<div id="two">
  <p>Different paragraph for ID 2</p>
</div>

<div id="three">
  <p>Something different for the example</p>
</div>

<div id="four">
  <p>Very last div</p>
</div>

CSS

ul {list-style: none;}
li {
  background-color: red;
  color: white;
  display: inline-block;
  margin: 0 5px;
  padding: 2px 5px;
}
li:hover {cursor: pointer}
div {display: none}
.active {display: block}

JavaScript

$("li").click(function() {
   var liClass = this.className;
   $("div").removeClass("active");
   $("#"+liClass).addClass("active"); 
});