SO-32797997

by David Thomas

HTML

<div class="links">
  <a href="#" class="lb block-1">Highlight Block 1</a>
  <a href="#" class="lb block-2">Highlight Block 2</a>
  <a href="#" class="lb block-3">Highlight Block 3</a>
  <a href="#" class="lb block-4">Highlight Block 4</a>
  <a href="#" class="lb block-5">Highlight Block 5</a>
  <a href="#" class="lb block-6">Highlight Block 6</a>
</div>

<div class="highlight-block">
  <div class="cb block-1 active">This is Block 1</div>
  <div class="cb block-2">This is Block 2</div>
  <div class="cb block-3">This is Block 3</div>
  <div class="cb block-4">This is Block 4</div>
  <div class="cb block-5">This is Block 5</div>
  <div class="cb block-6">This is Block 6</div>
</div>

CSS

.links a {
    display: inline-block;
    border: 1px solid #000;
    padding: 0.25em;
    margin: 0.2em;
    border-radius: 0.5em;
}
.active {
    background-color: red;
}

JavaScript

$('.links a').click(function() {
  var i = $(this).index();
  $('.highlight-block div.cb')
  .eq(i)
  .addClass('active')
  .siblings()
  .removeClass('active');
});