<分区>
使用这个 JSFiddle ，编辑为使用两个 div 而不是两个表(#kellypockets 和 #birkinpockets)，我正在尝试设置当前正在显示其内容的按钮的样式。
我已经编写了以下脚本，但它似乎不起作用(显然，我是新手):
$(document).ready(function() {
if ($("#kellypockets").css('display') === 'block') {
$('#button2').addClass("pockets-button-active");
}
if ($("#birkinpockets").css('display') === 'block') {
$('#button1').addClass("pockets-button-active");
}
});.pockets-button-active {
font-family: "Oswald", sans-serif;
font-weight: 400;
font-style: normal;
font-size: em(14px);
color: #373737;
text-align: center;
text-transform: uppercase;
letter-spacing: 0em;
border-style: solid;
border-bottom: 3px;
border-color: #f5591b;
@include at-query($max, $small) {
font-size: em(12px);
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button1" class="pockets-button" type="button">
<img src="//cdn.shopify.com/s/files/1/1079/2758/files/birkin-181x178-X2.png?3337508748521283727" width="89px" alt="Hermes Birkin icon" style="margin-left: auto; margin-right: auto; vertical-align: middle;" /> Hermes Birkin
</button>
<button id="button2" class="pockets-button" type="button">
<img src="//cdn.shopify.com/s/files/1/1079/2758/files/kelly-181x178-X2.png?3337508748521283727" width="89px" alt="Hermes Birkin icon" style="vertical-align: middle; margin-left: auto; margin-right: auto;" /> Hermes Kelly
</button>
<div id="kellypockets" class="grid pockets">Bla</div>
<div id="birkinpockets" class="grid pockets">Bla</div>有人能帮忙吗？