Tab Content Clickable

<!DOCTYPE html>
<html>
<head>

<style>

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

    .tabUl{
        padding:0em 0em 0.4em 0em;
        border-bottom:1px solid #999999;
    }

    .tabUl li{
        display: inline;
        list-style-type: none;
        padding: 0.5em 1em 0.5em 1em;
        cursor: pointer;
        margin:0px;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
        font-size: 0.9em;

    }

    .tabContent{
        display: none;
        width:100%;
    }

    .tabContentStart{
        display:block;
    }

    .tabNav{
        color:#ffffff;
        background-color: #6666cc;
    }

    .tabNavActive{
        background-color:#fdfdfd;
        border-top:1px solid #cccccc;
        border-left:1px solid #cccccc;
        border-right:1px solid #cccccc;
        border-bottom:1px solid #fdfdfd;
        color:#555555;
        cursor:default !important;
    }

</style>

</head>
<body>

<ul class="tabUl">
    <li id="tab00" class="tabNav tabNavActive" data-tab-id="content00" data-tab-class="group00" data-block="block">Tab 00</li>
    <li id="tab01" class="tabNav" data-tab-id="content01" data-tab-class="group00" data-block="block">Tab 01</li>
    <li id="tab02" class="tabNav" data-tab-id="content02" data-tab-class="group00" data-block="block">Tab 02</li>
</ul>

<div id="content00" class="tabContent tabContentStart" data-tab-class="group00">0. Content 00</div>
<div id="content01" class="tabContent" data-tab-class="group00">1. Content 01 One</div>
<div id="content02" class="tabContent" data-tab-class="group00">2. Content 002 Two Two</div>

<script>

var tabContentList = document.getElementsByClassName("tabContent");

var tabNavList = document.getElementsByClassName("tabNav");
for (var i = 0; i < tabNavList.length; i++) {
    tabNavList[i].addEventListener("click", tabNavClick);
}

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

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

    // UPDATE TAB LIs
    for (var i = 0; i < tabNavList.length; i++) {
        var thisDataTabClass = tabNavList[i].getAttribute('data-tab-class');
        if(thisTargetClass == thisDataTabClass){
            tabNavList[i].classList.remove("tabNavActive");
            tabNavList[i].classList.add("tabNav");
        }
    }
    document.getElementById(thisId).classList.add("tabNavActive");


}

</script>

</body>
</html>