我如何使 标记的所有元素不可见,只有具有正确ID的元素除外

问题描述 投票:1回答:2

我正在制作一个显示对数规则和示例的简单网站。我试图使所有其他规则消失,除了与单击的按钮相对应的规则。这些按钮目前不起作用。我不确定javascript有什么问题。

        <script>
            function log() {
                var tag = document.getElementsByTagName("p")
                tag.style.display = "none"
                var ID = document.getElementById("log");
                ID.style.display = "block";
            }
            function product() {
                var tag = document.getElementsByTagName("p")
                tag.style.display = "none"
                var ID = document.getElementById("product");
                ID.style.display = "block";
            }
            function quotient() {
                var tag = document.getElementsByTagName("p")
                tag.style.display = "none"
                var ID = document.getElementById("quotient");
                ID.style.display = "block";
            }
            function power() {
                var tag = document.getElementsByTagName("p")
                tag.style.display = "none"
                var ID = document.getElementById("power");
                ID.style.display = "block";
            }
            function inverse() {
                var tag = document.getElementsByTagName("p")
                tag.style.display = "none"
                var ID = document.getElementById("inverse");
                ID.style.display = "block";
            }
            function changebase() {
                var tag = document.getElementsByTagName("p")
                tag.style.display = "none"
                var ID = document.getElementById("changebase");
                ID.style.display = "block";
            }
        </script>
javascript html
2个回答
0
投票

function show(id) { const pTags = document.getElementsByTagName('p'); for (let i = 0; i < pTags.length; i++) { pTags[i].style.display = pTags[i].id === id ? "block" : "none"; } } show("quotient");
<p id="products">Products</p> <p id="quotient">Quotient</p> <button onclick="show('products')">Show Products</button> <button onclick="show('quotient')">Show Quotient</button>

0
投票

const myMenu = document.querySelector('#menu-select') , myPara = document.querySelectorAll('p') myMenu.oninput=()=> { myPara.forEach(pElm=> pElm.style.display = (pElm.id === myMenu.value) ? 'block': 'none') }
<select id="menu-select"> <option value="log" selected >log</option> <option value="product" >product</option> <option value="quotient" >quotient</option> <option value="power" >power</option> <option value="inverse" >inverse</option> <option value="changebase">changebase</option> </select> <p id="log" >log </p> <p id="product" >product</p> <p id="quotient" >quotient</p> <p id="power" >power</p> <p id="inverse" >inverse</p> <p id="changebase">changebase</p>
否则,如果您更喜欢使用功能...
 

function showTag( idTagP ) { document.querySelectorAll('p').forEach(pElm=>{ pElm.style.display = (pElm.id === idTagP) ? 'block': 'none' }) } showTag("quotient");
<p id="products">Products</p> <p id="quotient">Quotient</p>
© www.soinside.com 2019 - 2024. All rights reserved.