change active or selected state of list item using jquery

I have the following list and want to be able to set the active state to on when I click any of them. Right now, the hover works and when I click on them the active works except for when I click anywhere else on the page the active state goes away. Is there a way with jQuery to set the state to active?

<ul id="cat-tabs">
  <li><a class="tab1" href="javascript:showTab(1);">Live Music</a></li>
  <li><a class="tab2" href="javascript:showTab(2);">Arts &amp; Theatre</a></li>
  <li><a class="tab3" href="javascript:showTab(3);">Classes &amp; Workshops</a></li>
  <li><a class="tab4" href="javascript:showTab(4);">Health &amp; Fitness</a></li>
  <li><a class="tab5" href="javascript:showTab(5);">Food &amp; Drink</a></li>
  <li><a class="tab6" href="javascript:showTab(6);">Happy Hour</a></li>
</ul>

and the CSS

#cat {
display: block;
float: left;
width: 100%;
border-bottom-width: 4px;
border-bottom-style: solid;
border-bottom-color: #af0c07;
margin-top: 12px;
margin-bottom: 10px;
}

.navigation {
font-family: Roboto, sans-serif;
font-weight: bold;
}

#cat-tabs {
font-size: 0.96em;
padding-top: 0px;
padding-right: 12px;
padding-bottom: 0px;
padding-left: 12px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: -14px;
}

#cat-tabs li {
float: left; /* LTR */
list-style: none;
margin-top: 0px;
margin-right: 1px;
margin-bottom: 0px;
margin-left: 1px;
padding-top: 0px;
padding-right: 1px;
padding-bottom: 0px;
padding-left: 1px;
}

#cat-tabs a {
color: #333;
background: #d1d2d4;
float: left; /* LTR */
height: 2.2em;
line-height: 2.2em;
padding: 0 0.8em;
text-decoration: none;
-khtml-border-radius-topleft: 8px;
-khtml-border-radius-topright: 8px;
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}

#cat-tabs a:hover,
#cat-tabs a:focus {
color: #FFFFFF;
background: #af0c07;
}

#cat-tabs a:hover {
-webkit-transition: 0.3s ease;
-moz-transition: 0.3s ease;
-ms-transition: 0.3s ease;
-o-transition: 0.3s ease;
transition: 0.3s ease;
}

#cat-tabs a:active {
color: #FFFFFF;
background: #af0c07;
}

#cat-tabs li a.active {
color: #FFFFFF;
background-color: #3d3b3c;
-khtml-border-radius-topleft: 8px;
-khtml-border-radius-topright: 8px;
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-bottom: none;
}