如何仅在单击按钮时显示 div

Question

您好，我只想在单击不同按钮后显示 div ID 占位符 1、占位符 2 等。但我不确定如何开始。请帮助我，谢谢 :-) 下面是我针对不同 div id 的代码。

<div id="content">
            <div class="demo-container">
                <div id="placeholder1" class="demo-placeholder"></div>
            </div>

            <div class="demo-container" style="height:150px;">
                <div id="overview1" class="demo-placeholder"></div>
            </div>

            <p>Carbon Dioxide Reading</p>
            <div class="demo-container">
            <div id="placeholder2" class="demo-placeholder"></div>
            </div>

            <div class="demo-container" style="height:150px;">
            <div id="overview2" class="demo-placeholder"></div>
            </div>

            <p>Gas Reading</p>
            <div class="demo-container">
            <div id="placeholder3" class="demo-placeholder"></div>
            </div>

            <div class="demo-container" style="height:150px;">
            <div id="overview3" class="demo-placeholder"></div>
            </div>

            <p>Humidity Reading</p>
            <div class="demo-container">
            <div id="placeholder4" class="demo-placeholder"></div>
            </div>

            <div class="demo-container" style="height:150px;">
            <div id="overview4" class="demo-placeholder"></div>
            </div>

            <p>Temperature Reading</p>
            <div class="demo-container">
            <div id="placeholder5" class="demo-placeholder"></div>
            </div>

            <div class="demo-container" style="height:150px;">
            <div id="overview5" class="demo-placeholder"></div>
            </div>

    </div>

Answer 1

要在单击按钮时显示 div，您可以将其添加到 CSS:

.demo-placeholder {
display: none;
}

然后，例如，这是您的按钮：

<input type="button" id="but1" class="buttons" onclick="showDiv1()">Show Button 1

然后将此添加到您的 JavaScript:

function showDiv1(){
document.getElementById("placeholder1").style.display = 'block';
}

注意

当您想对多个按钮执行此操作时，请确保不要使用相同的功能，而是将数字更改为您要显示的 div。如果您需要更多帮助，请告诉我，我会更新我的答案。

希望对您有所帮助！

Answer 2

这是非常基础的 JQuery 代码：

$("#ph1").click(function(){
    $("[id^='placeholder']").hide();
    $("#placeholder1").show();
});
$("#ph2").click(function(){
    $("[id^='placeholder']").hide();
    $("#placeholder2").show();
});
$("#ph3").click(function(){
    $("[id^='placeholder']").hide();
    $("#placeholder3").show();
});
$("#ph4").click(function(){
    $("[id^='placeholder']").hide();
    $("#placeholder4").show();
});
$("#ph5").click(function(){
    $("[id^='placeholder']").hide();
    $("#placeholder5").show();
});

Here is the JSFiddle demo

我添加了 ID 为 ph1、ph2 等的按钮... 然后单击按钮执行以下操作： $("[id^='placeholder']").hide(); 隐藏 ID 中包含 placeholder 文本的所有元素

$("#placeholder1").show(); 显示具有已定义 ID 的元素（在本例中为 placeholder1）

如何仅在单击按钮时显示 div

how to display a div only when a button is clicked

html

onclick

button