Band Tabs Clickable Content

<!DOCTYPE html>
<html>
<head>

<style>

    body{
        background-color: #FFFFFF;
        font-family: Arial, Helvetica, sans-serif;
    }

    .bandNav{
        padding: 0.5em 1em 0.5em 1em;
        cursor: pointer;
        margin:0px;
        border-radius:3px;
        font-size: 0.9em;
    }

    .bandContent{
        display: none;
        width:100%;
        padding: 1em;
    }

    .bandContentStart{
        display:block;
    }

    .bandNav{
        color:#ffffff;
        background-color: #6666cc;
        border-top:1px solid #ffffff;
    }

    .bandNavActive{
        background-color:#8888ee;
        border-top:1px solid #ffffff;
        border-left:1px solid #8888ee;
        border-right:1px solid#8888ee;
        border-bottom:1px solid #8888ee;
        cursor:default !important;
    }

</style>

</head>
<body>

<div id="tab00" class="bandNav bandNavActive" data-band-id="content00" data-band-class="group00" data-block="block">Tab 00</div>
<div id="content00" class="bandContent bandContentStart" data-band-class="group00">
    0. Content 00
</div>

<div id="tab01" class="bandNav" data-band-id="content01" data-band-class="group00" data-block="block">Tab 01</div>
<div id="content01" class="bandContent" data-band-class="group00">
    1. Content 01 One
</div>

<div id="tab02" class="bandNav" data-band-id="content02" data-band-class="group00" data-block="block">Tab 02</div>
<div id="content02" class="bandContent" data-band-class="group00">
    2. Content 002 Two Two
</div>

<script>

var bandContentList = document.getElementsByClassName("bandContent");

var bandNavList = document.getElementsByClassName("bandNav");
for (var i = 0; i < bandNavList.length; i++) {
    bandNavList[i].addEventListener("click", bandNavClick);
}

function bandNavClick(event){
    var thisId = event.target.id;
    var thisIdSrc = document.getElementById(thisId)
    var thisTargetId = thisIdSrc.getAttribute('data-band-id');
    var thisTargetClass = thisIdSrc.getAttribute('data-band-class');
    var thisTargetBlock = thisIdSrc.getAttribute('data-block');
    console.log(thisTargetId + " : " + thisTargetClass + " : " + thisTargetBlock);

    // UPDATE CONTENT DIVS
    for (i = 0; i < bandContentList.length; i++) {
        var srcGroup = bandContentList[i].getAttribute('data-band-class');
        if(srcGroup == thisTargetClass ){
            bandContentList[i].style.display = "none"
        }
    }
    document.getElementById(thisTargetId).style.display = thisTargetBlock;

    // UPDATE TAB DIVs
    for (var i = 0; i < bandNavList.length; i++) {
        var thisDataTabClass = bandNavList[i].getAttribute('data-band-class');
        if(thisTargetClass == thisDataTabClass){
            bandNavList[i].classList.remove("bandNavActive");
            bandNavList[i].classList.add("bandNav");
        }
    }
    document.getElementById(thisId).classList.add("bandNavActive");

}

</script>

</body>
</html>