<ul>
<li class="select"></li>
<li class="select"></li>
<li id="origin">Click</li>
<li class="select"></li>
<li class="select"></li>
</ul>
@import url(https://fonts.googleapis.com/css?family=Quicksand);
*{
margin:0;
padding:0;
box-sizing:border-box;
color:#fff;
font-family: 'Quicksand', sans-serif;
}
ul{
text-align:center;
padding:64px;
}
li{
display:inline-block;
vertical-align:middle;
margin:4px;
width:64px;
height:64px;
line-height:64px;
}
.select{
background:rgba(200,200,200,1);
}
.active{
background:rgba(99,214,218,0.5);
}
#origin{
background:rgba(99,214,218,1.0);
text-align:center;
cursor:pointer;
}
$('#origin').on('click',function(){
$(this).siblings('.select').addClass('active');
});
Also see: Tab Triggers