Question

您好我只想点击不同的按钮，只显示div id placeholder1，placeholder2等。但我不知道如何开始。请帮帮我，谢谢:-)下面是我对不同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

我添加了带有ph1，ph2等的按钮... 然后单击按钮执行以下操作： $("[id^='placeholder']").hide();隐藏了ID

中包含placeholder文字的所有元素

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

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

2 个答案: