Html 单击按钮后如何保持 :active css 样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31178653/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to keep :active css style after click a button
提问by Dereck
Once the button is clicked I want it to stay with the active style instead of going back to normal style. Can this be done with CSS please? Im using blurb button from DIVI Theme (WordPress). Please help me!
单击按钮后，我希望它保持活动样式，而不是返回正常样式。请问这可以用CSS完成吗？我使用 DIVI Theme (WordPress) 中的模糊按钮。请帮我！
code:
代码：
#blurb-hover.et_pb_blurb .et_pb_blurb_content
.et_pb_main_blurb_image .et-pb-icon:hover {
color: red !important; }
#blurb-hover.et_pb_blurb .et_pb_blurb_content
.et_pb_main_blurb_image .et-pb-icon:selected {
background-color: #ff4b46;
color: #fff; }
#blurb-hover.et_pb_blurb .et_pb_blurb_content
.et_pb_main_blurb_image .et-pb-icon:active {
color: white !important;
background-color: red;
width: 140px;
height: 100px; }
回答by SW4
CSS
CSS
:activedenotes the interaction state (so for a button will be applied during press), :focusmay be a better choice here. However, the styling will be lost once another element gains focus.
:active表示交互状态（因此按钮将在按下时应用），:focus这里可能是更好的选择。但是，一旦另一个元素获得焦点，样式就会丢失。
The final potential alternative using CSS would be to use :target, assuming the items being clicked are setting routes (e.g. anchors) within the page- however this can be interrupted if you are using routing (e.g. Angular), however this doesnt seem the case here.
使用 CSS 的最后一个潜在替代方法是使用:target，假设被点击的项目是在页面内设置路由（例如锚点） - 但是如果您使用路由（例如 Angular），这可能会被中断，但是这里似乎并非如此。
.active:active {
color: red;
}
.focus:focus {
color: red;
}
:target {
color: red;
}<button class='active'>Active</button>
<button class='focus'>Focus</button>
<a href='#target1' id='target1' class='target'>Target 1</a>
<a href='#target2' id='target2' class='target'>Target 2</a>
<a href='#target3' id='target3' class='target'>Target 3</a>Javascript / jQuery
Javascript / jQuery
As such, there is no way in CSS to absolutelytoggle a styled state- if none of the above work for you, you will either need to combine with a change in your HTML (e.g. based on a checkbox) or programatically apply/remove a class using e.g. jQuery
因此，CSS 中没有办法绝对切换样式状态 - 如果以上都不适合您，您将需要结合 HTML 中的更改（例如基于复选框）或以编程方式应用/删除使用例如 jQuery 的类
$('button').on('click', function(){
$('button').removeClass('selected');
$(this).addClass('selected');
});button.selected{
color:red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Item</button><button>Item</button><button>Item</button>
回答by GKB
In the Divi Theme Documentation, it says that the theme comes with access to 'ePanel' which also has an 'Integration' section.
在Divi Theme Documentation 中，它说该主题可以访问“ePanel”，该“ePanel”也有一个“集成”部分。
You should be able to add this code:
您应该能够添加以下代码：
<script>
$( ".et-pb-icon" ).click(function() {
$( this ).toggleClass( "active" );
});
</script>
into the the box that says 'Add code to the head of your blog' under the 'Integration' tab, which should get the jQuery working.
进入“集成”选项卡下的“将代码添加到您的博客标题”框中，这将使 jQuery 正常工作。
Then, you should be able to style your class to what ever you need.
然后，您应该能够根据您的需要设计您的课程。
回答by Aaron Fitch
I FIGURED IT OUT. SIMPLE, EFFECTIVE NO jQUERY
我想到了。简单、有效的无jquery
We're going to to be using a hidden checkbox.
This example includes one "on click - off click 'hover / active' state"
我们将使用一个隐藏的复选框。
此示例包括一个“点击时 - 关闭点击'悬停/活动'状态”
--
——
To make content itself clickable:
使内容本身可点击：
HTML
HTML
<input type="checkbox" id="activate-div">
<label for="activate-div">
<div class="my-div">
//MY DIV CONTENT
</div>
</label>
CSS
CSS
#activate-div{display:none}
.my-div{background-color:#FFF}
#activate-div:checked ~ label
.my-div{background-color:#000}
To make button change content:
要使按钮更改内容：
HTML
HTML
<input type="checkbox" id="activate-div">
<div class="my-div">
//MY DIV CONTENT
</div>
<label for="activate-div">
//MY BUTTON STUFF
</label>
CSS
CSS
#activate-div{display:none}
.my-div{background-color:#FFF}
#activate-div:checked +
.my-div{background-color:#000}
Hope it helps!!
希望能帮助到你！！
