单击后使按钮保持突出显示

Question

我尝试了:active，:focus，添加了一个类并使用jQuery更改了css规则，使按钮保持突出显示并且NOTHING工作正常。请查看我的代码并告诉我我做错了什么。

$(function() {
  $("li.upper").hide();
  $("li.lower").hide();
  $("#header1").on('click', function() {
    $("li.upper").slideToggle();
    $("#header1").removeClass("active");
    $(this).addClass("active");
  });
  $("#header2").click(function() {
    $("li.lower").slideToggle();
    $("li #header2").removeClass("active");
    $("li #header2").addClass("active");
  });
});

body {
  padding-top: 80px;
  text-align: center;
  font-family: monaco, monospace;
  //background: url(http://media.giphy.com/media/Jrd9E2kuPuOYM/giphy.gif) 50%;
  //background-size: cover;

}
h1 {
  font-size: 30px
}
h2 {
  font-size: 20px;
}
span {
  background: #fd0;
}
ul {
  list-style-type: none;
}
#header1,
#header2 {
  background-color: white;
  color: black;
  border: 2px solid #4CAF50;
  margin: 0 0 10px 0;
}
#header1:hover,
#header2:hover,
#header1:active,
#header2:active,
#header1:focus,
#header2:focus {
  background-color: #4CAF50;
  color: white;
}
.active {
  background-color: #4CAF50;
  color: white;
}
.upper,
.lower {
  background-color: white;
  color: black;
  border: 2px solid #008CBA;
  margin: 0 0 10px 0;
  padding: 10px 5px;
}
.upper:hover,
.lower:hover,
{
  background-color: #008CBA;
  color: white;
}
#list {
  position: relative;
  width: 300px;
}
span {
  /*CSS for enlarged image*/
  position: absolute;
  background-color: white;
  left: -1005px;
  visibility: hidden;
}
.upper:hover span,
.lower:hover span {
  /*CSS for enlarged image*/
  visibility: visible;
  top: 0;
  left: 320px;
  /*position where enlarged image should offset horizontally */
  z-index: 50;
}
#highlight {
  height: 500px;
  width: 500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="list">
  <ul>
    <li id="header1">
      <h2>Upper Body</h2>
    </li>
    <li id="front neck" class="upper">Front Neck<span><img id="highlight" src ="http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/01/front-neck2.png"/></span>
    </li>
    <li id="back neck" class="upper">Back Neck<span><img id="highlight" src ="http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/01/Back-Neck-2.png"/></span>
    </li>
    <li id="trapezius" class="upper">Trapezius<span><img id="highlight" src ="http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/01/Traps2.png"/></span>
    </li>
    <li id="shoulder" class="upper">Shoulder<span><img id="highlight" src ="http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/01/Interior-Deltoid2.png"/></span>
    </li>
    <li id="bicep" class="upper">Bicep<span><img id="highlight" src ="http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/01/Bicep-2.png"/></span>
    </li>
    <li id="tricep" class="upper">Tricep<span><img id="highlight" src ="http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/01/Tricep2.png"/></span>
    </li>
    <li id="forearm extensor" class="upper">Forearm Extensor<span><img id="highlight" src ="http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/01/extensor2.png"/></span>
    </li>
    <li id="forearm flexor" class="upper">Forearm Flexor<span><img id="highlight" src ="http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/01/FLEXER2.png"/></span>
    </li>
    <li id="header2">
      <h2>Lower Body</h2>
    </li>
    <li id="hamstring" class="lower">Hamstring<span><img id="highlight" src ="http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/01/Hammy2.png"/></span>
    </li>
    <li id="hamstring" class="lower">Calf<span><img id="highlight" src ="http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/01/Calf2.png"/></span>
    </li>
    <li id="hamstring" class="lower">IT Band<span><img id="highlight" src ="http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/01/IT-BAND-2.png"/></span>
    </li>
    <li id="hamstring" class="lower">Adductor<span><img id="highlight" src ="http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/01/Addcutor2.png"/></span>
    </li>
    <li id="hamstring" class="lower">Quadricep<span><img id="highlight" src ="http://m68.siteground.biz/~stretc22/wp-content/uploads/2016/01/Quad2.png"/></span>
    </li>
  </ul>
</div>

Answer 1

要获得预期结果，请使用Jquery CSS

JS：

-(void)playerViewController:(AVPlayerViewController *)playerViewController willResumePlaybackAfterUserNavigatedFromTime:(CMTime)oldTime toTime:(CMTime)targetTime;

Codepen-

Answer 2

快速修复（但不好的做法）是使用!important;

强制使用样式类

li.active {
  background-color: #4CAF50 !important;
  color: white !important;
}

我建议您阅读CSS Specificity