如何使用当前代码设置图像按钮的活动状态，而不仅仅是聚焦状态？
第一次在这里发帖，刚刚接触编程，只有 3 天的经验。
我在将默认按钮设置为active而不仅仅是 时遇到了一些麻烦focused。我曾尝试阅读有关此问题的其他帖子，但由于缺乏经验，我很难将 2 和 2 放在一起。
该页面将进入方形空间，因此我尝试在一个代码块中完成所有操作。我不希望当用户单击网站的其他部分时按钮停用（目前正是这种情况）。（即使他们点击空白区域）。
非常感谢您给我的任何建议。
/* 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 */
.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;
}
.assets:focus,
.assets:hover,
.assets:active {
background-position: 0 -135px;
}
.viz {
background-position: 0 -270px;
}
.viz:focus,
.viz:hover,
.viz:active {
background-position: 0 -405px;
}
.software {
background-position: 0 -540px;
}
.software:focus,
.software:hover,
.software:active {
background-position: 0 -675px;
}
.more {
background-position: 0 -810px;
}
.more:focus,
.more:hover,
.more:active {
background-position: 0 -945px;
}
/* Hides intitial button descriptions. */
#assets,
#viz,
#software,
#more {
display: none;
}
慕的地62643121回答
-
炎炎设计
欢迎来到堆栈溢出。因此首先要注意的是， :active 伪元素仅在用户单击（鼠标按下）某物时应用。最常见的方法是应用 css 类“active”，并在您想要设置样式的任何元素上使用 .active 选择器。现在，按钮受到悬停和焦点的影响，因此当用户单击按钮外部时，它将失去焦点。您可以通过更改一些 CSS 和 javascript 来解决这个问题。编辑过的部分标记为/* EDIT */我不建议最后一行利用您的函数传入元素 ID 的事实，并且该元素 ID 与用于选择它的按钮的类相匹配。更好的方法是show将 Javascript 事件作为参数，然后使用 event.target 来获取单击的 a 标签，然后使用 agetElementById之类的data-target="more"属性。这将允许您更改 CSS 类，而无需将该类耦合到 Javascript 的实现<!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>
随时随地看视频慕课网APP
相关分类
Html5