歡迎來到堆棧溢出。
因此首先要注意的是， :active 偽元素僅在用戶單擊（鼠標(biāo)按下）某物時應(yīng)用。
最常見的方法是應(yīng)用 css 類“active”，并在您想要設(shè)置樣式的任何元素上使用 .active 選擇器。
現(xiàn)在，按鈕受到懸停和焦點的影響，因此當(dāng)用戶單擊按鈕外部時，它將失去焦點。
您可以通過更改一些 CSS 和 javascript 來解決這個問題。編輯過的部分標(biāo)記為/* EDIT */
我不建議最后一行利用您的函數(shù)傳入元素 ID 的事實，并且該元素 ID 與用于選擇它的按鈕的類相匹配。更好的方法是show將 Javascript 事件作為參數(shù)，然后使用 event.target 來獲取單擊的 a 標(biāo)簽，然后使用 agetElementById之類的data-target="more"屬性。這將允許您更改 CSS 類，而無需將該類耦合到 Javascript 的實現(xiàn)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Services</title>
</head>
<style>/* Change Button Size/Border/BG Color And Align To Middle */
? ? .services {
? ? ? ? width:210px;
? ? ? ? height:135px;
? ? ? ? padding: 0px;
? ? ? ? border:0px;
? ? ? ? outline:0px;
? ? ? ? cursor: pointer;
? ? ? ? color: #999999;
? ? ? ? font-size: 20px;
? ? ? ? text-align: center;
? ? background:? ?url("https://i.ibb.co/G5mn9nY/Services-Buttons-Combined-Big.png") no-repeat; /* As all link share the same background-image */
? ? }
? ??
/* Set Mouseover Button Text and Current/Active Color */
/* EDIT */
? ? .services:focus, .services:hover, .services.active {
? ? ? ? color: black;
? ? }
? ??
/* Position Button Text*/
? divtext {
? ? position: relative;
? ? top: 90px;
? ? }
? ??
/* Div Wrapper to format button areas. */?
.servicesbuttonwrapper {
? ? display: flex;
? ? flex-flow: row wrap;
? ? justify-content: space-around;
? ?}
/* Div Wrapper to format revealed description text. */?
.servicestextwrapper {
? ? text-align: left;
? ? margin-left: 100px;
? ? margin-right: 32px;
? ? top: 50px;
? ? position: relative;
}
/* Change Image rollover position depending On Focus. */
? ? .assets? ? ? {
? ? ? ? background-position: 0 0;
? ? }
? ??
? ? /* EDIT */
? ? .assets:focus, .assets:hover, .assets.active? {
? ? ? ? background-position: 0 -135px;
? ? }
? ??
? ??
? ? .viz? ? ? ? {
? ? ? ? background-position: 0 -270px;
? ? }
? ??
? ? /* EDIT */
? ? .viz:focus, .viz:hover, .viz.active? {
? ? ? ? background-position: 0 -405px;
? ? }
? ? ? ??
? ??
? ? .software? ?{
? ? ? ? background-position: 0 -540px;
? ? }
? ??
? ? /* EDIT */
? ? .software:focus, .software:hover, .software.active? {
? ? ? ? background-position: 0 -675px;
? ? }
? ??
? ? .more? ? ? ?{
? ? ? ? background-position: 0 -810px;
? ? }
? ??
? ? /* EDIT */
? ? .more:focus, .more:hover, .more.active? {
? ? ? ? background-position: 0 -945px;
? ? }
/* Hides intitial button descriptions. */
#assets, #viz, #software, #more {
? ? display: none;
}?
</style>
<body>
? ?
<!--Div wrapper so we can format positioning of buttons in CSS-->
? <div class="servicesbuttonwrapper">
<!--Base buttons plus javascript functions for click behavior.? This used to be <button class> instead of <a href> but I read somewhere this is better...? seems to work ok.-->?
? ? ? <a href="javascript:void(0)" id="defaultstate" onclick="show('software');" class="services software"><divtext>INTERACTIVE SOFTWARE</divtext></a>
? ? ? ? ? ?
? ? ? <a href="javascript:void(0)" onclick="show('assets');" class="services assets"><divtext>3D ASSET CREATION</divtext></a>
? ? ? ? ? ? ? ??
? ? <a href="javascript:void(0)" onclick="show('viz');" class="services viz"><divtext>3D VISUALIZATION</divtext></a>
? ? ? ? ? ? ? ??
? ? <a href="javascript:void(0)" onclick="show('more');" class="services more"><divtext>IMAGE CREATION</divtext></a>
? ?</div>
? ?
<!--Base description text.-->?
? ?<div class="servicestextwrapper">
? ? ? ? <div id="assets">3D Assets Description.</div>
? ? <div id="viz">3D Visualization Description.</div>
? ? <div id="software">Interactive Software Description.</div>
? ? <div id="more">And More Description.</div>
? ?</div>? ?
? ?
<!--Javascript function to hide/show elements based on button press.-->?
<script type="text/javascript">
? ? /* EDIT */
? ? function show(elementId) {
? ? ? ? document.getElementById("assets").style.display = "none";
? ? ? ? document.getElementById("viz").style.display = "none";
? ? ? ? document.getElementById("software").style.display = "none";
? ? document.getElementById("more").style.display = "none";
? ? ? ? document.getElementById(elementId).style.display = "block";
? ? ? ??
? ? ? ? // get a list of the buttons with ".services" class
? ? ? ? const buttons = document.querySelectorAll(".services");
? ? ? ??
? ? ? ? for(let button of buttons) {
? ? ? ? ? // remove ".active" class
? ? ? ? ? button.classList.remove("active");
? ? ? ? }
? ? ? ??
? ? ? ? // add the active class to element button specified by argument
? ? ? ? document.querySelector("." + elementId).classList.add("active");
? ? }??
? ?</script>
? ?
<!--Javascript function to set first button as focus.-->?
<script>
window.onload=function(){
? document.getElementById("defaultstate").click();
};
var linkToFocus = document.getElementById('defaultstate');
linkToFocus.focus();
</script>
</body>
</html>
