Question

我有以下列表，并且希望能够在单击其中任何一个时将活动状态设置为on。现在，悬停工作，当我点击它们时，活动工作除了当我点击页面上的任何其他位置时活动状态消失。有没有办法用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

使用jquery！此代码始终添加一个活动类，即您单击的元素。之后，您可以将specialcss添加到活动元素。

例如：#cat-tabs a.active {background：red;}

试试这段代码：

$("#cat-tabs a").click(function(){
   $("#cat-tabs a").removeClass("active");
   $(this).addClass("active");
});

Answer 2

我所做的只是跟踪哪个锚标记最后一个活动，并将其className存储在一个名为active的变量中。在下一次单击身体外部时，最后点击的元素将重新聚焦

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

使用jquery更改列表项的活动或选定状态

2 个答案: