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 allClasses = Array.prototype.slice.call(this.classList, 0),
        n = allClasses.filter(function (c) {
            return /block-\d+$/.test(c);
        }).toString().match(/\d+$/);
    if (n) {
        $('.highlight-block div.block-' + n)
            .addClass('active')
            .siblings()
            .removeClass('active');
    }
});