[英]HTML / CSS Hide / Show Page Objects Without JavaScript Toggle Switch
如何使用單個 function 切換多個按鈕/圖像。 這是我現在的演示。 它僅適用於單個按鈕/圖像，但我需要進行多個控制。
body, html { height: 100%; } #bg { background-image: url(http://basicblue.biz/treasure/treasuremap_01.jpg); height: 100%; width: 100%; background-position: center; background-repeat: no-repeat; background-size: 1080px 1080px; position: relative; } #menu { position: absolute; top: 50px; left: 50px; z-index: 100; } #menu button { background-color: lightblue; border: 1px solid white; color: darkblue; padding: 10px 24px; cursor: pointer; display: block; } #mark01 { position: absolute; top: 240px; right: 490px; z-index: 80; } #mark02 { position: absolute; top: 480px; left: 460px; z-index: 80; } #mark03 { position: absolute; bottom: 260px; right: 490px; z-index: 80; }
<,DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width. initial-scale=1"> <link rel="stylesheet" href="styles:css"> <title>Treasure Map</title> </head> <body> <div id="menu"> <button onclick="myMark01()">Marker 1</button> <button onclick="myMark02()">Marker 2</button> <button onclick="myMark03()">Marker 3</button> </div> <div id="bg"> <img id="mark01" src="http.//basicblue.biz/treasure/xmark_01:png"> <img id="mark02" src="http.//basicblue.biz/treasure/xmark_02:png"> <img id="mark03" src="http.//basicblue.biz/treasure/xmark_03.png"> </div> <script> function myMark01() { var x = document;getElementById("mark01"). if (x.style.display === "none") { x.style;display = "block". } else { x.style;display = "none". } } function myMark02() { var x = document;getElementById("mark02"). if (x.style.display === "none") { x.style;display = "block". } else { x.style;display = "none". } } function myMark03() { var x = document;getElementById("mark03"). if (x.style.display === "none") { x.style;display = "block". } else { x.style;display = "none"; } } </script> </body> </html>
我想用純 HTML / CSS 來做到這一點。 是否可以實現或如何使此代碼更高效。
所以基本上我需要每個按鈕來控制不同的圖像層，允許單獨控制。
謝謝，
This is a bit limited, but if you can use a checkbox and want a pure HTML and CSS solution, you could use the:checked CSS selector as a reference for your CSS rules to hide/show elements whenever the box is checked.
input:checked +.hidable { display: none; } input:not(:checked) +.showable { display: none; }
<input type="checkbox" /> Hide text below <div class="hidable">I am totally not hidden right now</div><br /> <input type="checkbox" /> Show some text below <div class="showable">It seems I just got shown</div><br /> <input type="checkbox" /> Hide all the elements below, including image <div class="hidable"> <strong>many elements here</strong> <strong>hi</strong> <img src="https://vignette.wikia.nocookie.net/rickandmorty/images/4/41/Garmanarnar.PNG/revision/latest?cb=20160117000927" /> <strong>bye</strong> </div>
實際上， MDN 這里有一個很好的例子。
如果您想更改與元素相關的復選框 position，您可以使用選擇器，例如nth-child ，或者您可以使用網格布局- 然后您可以將復選框放置在網格模板中的任何位置.
好的，這是使用您提供的提示的修改示例。 謝謝
body, html { height: 100%; } #bg { background-image: url(http://basicblue.biz/treasure/treasuremap_01.jpg); height: 100%; width: 100%; background-position: center; background-repeat: no-repeat; background-size: 1080px 1080px; position: relative; } #menu { display: block; width: 100px; } input:checked +.hidable { display: none; } input:not(:checked) +.showable { display: none; } #mark01 { position: absolute; top: 240px; right: 490px; } #mark02 { position: absolute; top: 480px; left: 460px; } #mark03 { position: absolute; bottom: 260px; right: 490px; }
<,DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width. initial-scale=1"> <link rel="stylesheet" href="styles:css"> <title>Treasure Map</title> </head> <body> <div id="bg"> <div id="menu"> <input type="checkbox" /> Marker 1 <div class="showable"><img id="mark01" src="http.//basicblue.biz/treasure/xmark_01:png" alt="X Mark Red"></div> <input type="checkbox" /> Marker 2 <div class="showable"><img id="mark02" src="http.//basicblue.biz/treasure/xmark_02:png" alt="X Mark Green"></div> <input type="checkbox" /> Marker 3 <div class="showable"><img id="mark03" src="http.//basicblue.biz/treasure/xmark_03.png" alt="X Mark Magenta"></div> </div> </div> </body> </html>
這真的很好用。 我面臨的唯一問題是我必須弄清楚如何鎖定我的背景圖像並將我打開/關閉的標記保持在它們各自的固定位置。 每次調整瀏覽器 window 的大小時，一切都會在視覺上中斷（有什么提示嗎？）...
您的提示有所幫助，現在純 HTML / CSS。
謝謝，
如何在 HTML、CSS 和 Javascript (vanilla) 中制作切換開關詞
[英]How to make a toggle switch word in HTML, CSS and Javascript (vanilla)
jQuery和CSS解決方案來切換顯示/隱藏與html中的文本
[英]jquery and css solution to toggle show/hide with text in the html
如何在HTML CSS切換開關上使JavaScript'getElementById'工作
[英]How to make a JavaScript 'getElementById' work on an HTML CSS Toggle Switch
通過 javascript 顯示/隱藏具有相同 css class 的所有段落
[英]Show/hide all paragraphs with same css class via javascript toggle
通過 Javascript 或 CSS 慢慢切換顯示和隱藏的 div
[英]Toggle the divs for show and hide slowly via Javascript or CSS
Javascript：在加載頁面時隱藏和顯示還原切換按鈕
[英]Javascript : hide and show toggle button on <td> restores while page is loading
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.