jquery - 使用 jquery 更改列表项的事件或选定状态

Question

我有以下列表，并且希望能够在我单击其中任何一个时将事件状态设置为开启。现在，悬停有效，当我点击它们时，事件有效，除了当我点击页面上的其他任何地方时，事件状态消失。有没有办法使用 jQuery 将状态设置为事件？

<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>

和 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;
}

Answer 1

What I did was to just track which anchor tag was last active and store its className in a variable called active. On the next click outside on the body the last clicked element is refocused

var active = null;

$('#cat-tabs a').click(function(evt) {
  active = $(this).attr("class");
});
$('body').click(function(evt) {
 if(active!=null){
  $('a.' + active).focus();
}
   
 });

#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;
}

.activeBF {
  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;
}
body{height:1000px;
width:1000px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<ul id="cat-tabs">
  <li><a class="tab1" href="#">Live Music</a></li>
  <li><a class="tab2" href="#">Arts &amp; Theatre</a></li>
  <li><a class="tab3" href="#">Classes &amp; Workshops</a></li>
  <li><a class="tab4" href="#">Health &amp; Fitness</a></li>
  <li><a class="tab5" href="#">Food &amp; Drink</a></li>
  <li><a class="tab6" href="#">Happy Hour</a></li>
</ul>
<div style="height:900px;width:900px;background:#333;">

</div>