javascript - 仅显示与在 HTML 中单击的那些按钮相关的内容

Question

我在 HTML 中有三个按钮，orders和 products和 supplier .我想当用户点击orders订单显示，当用户点击 products ，显示产品，单击时显示 vendor 名称。

function changedata(parameter){
    if(parameter==0){
        document.getElementById('myorders').style.fontSize="25px";
    }
    else if(parameter==1){
        document.getElementById('myproducts').style.fontSize="25px";
    }
    else{
        document.getElementById('mysupplier').style.fontSize="25px";
    }
}

<button class="button" onclick="changedata(0)">ORDERS</button>
<button class="button" onclick="changedata(1)">PRODUCTS</button>
<button class="button" onclick="changedata(2)">SUPPLIER</button>
<div id="myorders">
    <p>Laptop, Earphone</p>
</div>
<div id="myproducts">
    <p>Earphone, smart watch</p>
</div>
<div id="mysupplier">
    <p>Amazon, E-kart</p>
</div>

但它不会隐藏数据并满足我的需要，我是 Web 开发的初学者，寻求仅在按下相应按钮时才显示数据的帮助。

Answer 1

尝试在 CSS 中为每个元素设置默认值 display:none，例如 -

#myorders,
#mysuppliers,
#myproducts {
  font-size: 25px;
  display: none;
}

这将选择每个元素并立即隐藏它们。
然后，当按下按钮时，您可以使用

document.getElementById('___').style.display = 'block';

然后显示该元素。
这是最终产品:

function changedata(parameter){
    if(parameter==0){
        document.getElementById('myorders').style.display = 'block';
    }
    else if(parameter==1){
        document.getElementById('myproducts').style.display = 'block';
    }
    else{
        document.getElementById('mysupplier').style.display = 'block';
    }
}

#myorders,
#myproducts,
#mysupplier{
font-size: 25px;
display: none;
}

<button class="button" onclick="changedata(0)">ORDERS</button>
<button class="button" onclick="changedata(1)">PRODUCTS</button>
<button class="button" onclick="changedata(2)">SUPPLIER</button>
<div id="myorders">
    <p>Laptop, Earphone</p>
</div>
<div id="myproducts">
    <p>Earphone, smart watch</p>
</div>
<div id="mysupplier">
    <p>Amazon, E-kart</p>
</div>

如果您想让元素在每次按下按钮时在隐藏和显示之间切换，我建议使用 javascript 切换一个类，如下所示:

function changedata(parameter){
    if(parameter==0){
      document.getElementById('myorders').classList.toggle('active');
    }
    else if(parameter==1){
    document.getElementById('myproducts').classList.toggle('active');
    }
    else{
    document.getElementById('mysupplier').classList.toggle('active');
    }
}

#myorders,
#myproducts,
#mysupplier{
font-size: 25px;
display: none;
}
#myorders.active,
#myproducts.active,
#mysupplier.active{
display: block;
}

<button class="button" onclick="changedata(0)">ORDERS</button>
<button class="button" onclick="changedata(1)">PRODUCTS</button>
<button class="button" onclick="changedata(2)">SUPPLIER</button>
<div id="myorders">
    <p>Laptop, Earphone</p>
</div>
<div id="myproducts">
    <p>Earphone, smart watch</p>
</div>
<div id="mysupplier">
    <p>Amazon, E-kart</p>
</div>