根据输入状态标记背景颜色

Question

我正在处理一个选项卡，试图突出显示活动内容部分的标签。 我想更改标签的背景颜色以区分所选选项卡，是否可以仅使用 css 来做到这一点？ 如果没有，我怎么能用javascript做到这一点？ 我尝试在此票证之后使用 css（ 根据 <input> 的状态设置 <label> 样式），javascript 将活动状态分配给元素但没有成功。

 /* Tabs Name Container */ .TabsHeader-container{ position: relative; width: 120px; float: left; z-index: 20; } /* Tabs Names Label */ .TabsHeader-container label{ position: relative; padding: 10px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); display: block; font-size: 13px; color: black; cursor: pointer; user-select: none; } .TabsHeader-container1 { background-color:#f8ab1f; width:50px; height:50px; border-radius:50px; } .TabsHeader-container2 { background-color:#f8ab1f; margin-top:20px; width:50px; height:50px; border-radius:6px; } /* Hover effect on tabs names */ .TabsHeader-container label:hover{ background: rgba(0, 0, 0, 0.2); } /* Content area for tabs */ .TabsHeader-content{ position: relative; background: white; border-radius:10px; width: calc(100% - 120px); padding: 15px; float: left; box-sizing: border-box; z-index: 19; display: none; } .TabsHeader-content:after{ content: ""; clear: both; } /* Hide input radio from users */ input[name="TabsHeader"]{ display: none; } /* Show tab when input checked */ input[name="TabsHeader"]:checked + .TabsHeader-content{ display: block; animation: slide 0.5s forwards; } /* Slide animation for tab contents */ @keyframes slide{ from{ left: -10%; opacity: 0; } to{ left: 0; opacity: 1; } }

 <section class="TabsHeader-container"> <label class="TabsHeader-container1" for="TabsHeader1"></label> <label class="TabsHeader-container2" for="TabsHeader2"></label> </section> <input name="TabsHeader" id="TabsHeader1" type="radio" checked /> <section class="TabsHeader-content"> <p class="text1" style="font-size:19px;">Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p> <!-- Any other content --> </section> <input class="text2" name="TabsHeader" id="TabsHeader2" type="radio" checked /> <section class="TabsHeader-content"> <p style="font-size:19px;"> Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p> </section>

非常感谢。

Answer 1

可以只使用一点jquery吗？ 就像是：

$(document).ready(function(){
     $('.TabsHeader-container1').click(function(){
          $(this).addClass("active");
          $('.TabsHeader-container2').removeClass("active");
     });
     $('.TabsHeader-container2').click(function(){
          $(this).addClass("active");
          $('.TabsHeader-container1').removeClass("active");
     });
});

然后只需将 .active{} 添加到您想要的背景颜色的样式表中，一切都应该很好。