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')
        .eq(i)
        .toggleClass('active');
});