单击按钮后使按钮保持高亮显示

Question

我尝试过:active、:focus、添加类和更改css规则，使用jQuery使按钮保持高亮显示，但没有任何效果。请检查我的代码，并告诉我做错了什么。

​

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

联署材料：

$(function() {
  $("li.upper").hide();
  $("li.lower").hide();
  $("#header1").on('click', function() {
    $("li.upper").slideToggle();
    $("#header1").removeClass("active");
    $(this).css({
      "background": "#4CAF50",
      "color": "white"
    });
  });
  $("#header2").click(function() {
    $("li.lower").slideToggle();
    $("li #header2").removeClass("active");
    $("li #header2").addClass("active");
    $(this).css({
      "background": "#4CAF50",
      "color": "white"
    });
  });
});

Codepen- http://codepen.io/nagasai/pen/XKkRVG

Answer 2

快速修复(但实践不佳)是强制使用!important;的样式类。

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

我建议在CSS特异性上阅读