Edit in JSFiddle

<ul data-activable>
    <li class="active">item 1, behavior "1"</li>
    <li>item 2, behavior "1"</li>
    <li>item 3, behavior "1"</li>
</ul>
<ul data-activable="01">
    <li>item 1, behavior "01"</li>
    <li>item 2, behavior "01"</li>
    <li>item 3, behavior "01"</li>
</ul>
<ul data-activable="0X">
    <li>item 1, behavior "0X"</li>
    <li>item 2, behavior "0X"</li>
    <li>item 3, behavior "0X"</li>
</ul>
<ul data-activable="T">
    <li>item 1, behavior "T"</li>
    <li>item 2, behavior "T"</li>
    <li>item 3, behavior "T"</li>
</ul>

body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 12px;
}

ul {
    display: table;
    width: 100%;
    margin: 0 0 15px;
    padding: 0;
    list-style-type: none;
}

li {
    display: table-cell;
    width: 32%;
    padding: 4px 8px;
    border-right: 3px solid #fff;
    background-color: #BBB;
    cursor: pointer; 
}

li.active {
    background-color: #7BD;
}