m 相关问题

我是 HTML、CSS 和 JavaScript 的新手，我需要一些帮助。假设我有 3 个按钮和 3 个段落 .隐藏{ 显示：无； } 我是 HTML、CSS 和 JavaScript 的新手，我需要一些帮助。假设我有 3 个按钮和 3 个段落 <head> <style> .hidden { display: none; } </style> </head> <body> <button>A</button> <button>B</button> <button>C</button> <br> <p>A</p> <p>B</p> <p>C</p> </body> 我想创建一个js函数，使用应用“hidden”类的CSS规则来隐藏除与按钮具有相同字母的段落之外的所有段落。我尝试了很多方法，但我所能做的就是将隐藏的类切换到所有段落。有人可以解释一下我该怎么做吗？谢谢！这是我用来测试我能想到的任何解决方案的文件 <!doctype html> <html> <head> <title></title> <style> .hidden { display: none; } </style> </head> <body> <div class="button"> <button class="a" onClick="toggle(this,id)">a</button> <button class="b" onClick="toggle(this,id)">b</button> <button class="c" onClick="toggle(this,id)">c</button> </div> <div class="main"> <div class="a text"> <p>a</p> </div> <div class="b text"> <p>b</p> </div> <div class="c text"> <p>c</p> </div> </div> <script> function toggle(clicked,id) { var el = document.querySelectorAll(".text"); var length = el.length; for (let i=0; i<length; i++){ el[i].classList.add("hidden"); } } </script> </body> </html> 为了避免从不同的文件切换，我在 HTML 文件中编写了所有 CSS 和 JS。我尝试在每个 JavaScript 代码之前添加相应的注释，希望对你有帮助。 // Function to hide all paragraphs and show the selected one function showParagraph(letter) { // Get all paragraphs const paragraphs = document.querySelectorAll('p'); // Hide all paragraphs paragraphs.forEach(para => { para.classList.add('hidden'); }); // Show the paragraph that matches the button clicked const selectedParagraph = document.getElementById(`para${letter}`); if (selectedParagraph) { selectedParagraph.classList.remove('hidden'); } } // Add event listeners to buttons document.getElementById('buttonA').addEventListener('click', () => showParagraph('A')); document.getElementById('buttonB').addEventListener('click', () => showParagraph('B')); document.getElementById('buttonC').addEventListener('click', () => showParagraph('C')); .hidden { display: none; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hide Paragraphs Example</title> </head> <body> <button id="buttonA">A</button> <button id="buttonB">B</button> <button id="buttonC">C</button> <br> <p id="paraA">A</p> <p id="paraB">B</p> <p id="paraC">C</p> </body> </html> 部分para${letter}仅检查字母A, B, C并将其映射到para，即； paraA等。在 JavaScript 中，模板文字是用反引号 (`) 字符分隔的文字，允许多行字符串、嵌入表达式的字符串插值以及称为标记模板的特殊结构。

javascript html css m

回答 1 投票 0

m 相关问题

最新问题