我正在制作一个显示对数规则和示例的简单网站。我试图使所有其他规则消失,除了与单击的按钮相对应的规则。这些按钮目前不起作用。我不确定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>
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>
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>