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

【问题标题】：how to display a div only when a button is clicked如何仅在单击按钮时显示 div
【发布时间】：2015-08-05 07:49:58
【问题描述】：

您好，我只想在单击不同按钮后显示 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>

【问题讨论】：

你尝试过使用 javascript 或 jquery 吗？
不，我什至不知道如何启动 onclick 功能：/
您需要 JavaScript 来处理这样的事件。如果你不熟悉 JavaScript，jQuery 是你最快的选择。它只是类似于 $("#button1").click(function(){ $("#placeholder1").show(); });
将 onclick="myFunctionName()" 添加到您要触发点击的元素中，然后在您的javascript代码。试试看，让我们知道您的想法...

标签： html button onclick

【解决方案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。如果您需要更多帮助，请告诉我，我会更新我的答案。

希望对你有所帮助！

【讨论】：

我应该为 divname 放置什么？
div 的 id 是 CSS 识别的名称。当您在 CSS 中添加 div 的 id/class 时，它知道您要将其应用到哪个 div，仅此而已。 :)

【解决方案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）

【讨论】：