单击带有css的按钮时显示div [重复]答案

【问题标题】：Display div on click of a button with css [duplicate]单击带有css的按钮时显示div [重复]
【发布时间】：2018-06-11 13:23:11
【问题描述】：

我想做的是一个小按钮，当你点击它时，会出现一个新的 div，就像在这个页面中一样：

http://www.ign.com/events/e3

当您单击红色的“查看计划”按钮时。有什么办法可以用 CSS 和 HTML 做到这一点吗？还是我需要使用 Javascript？

【问题讨论】：

标签： css button

【解决方案1】：

是的，点击事件是 JavaScript。您可以在没有 JavaScript 的情况下使用 CSS 执行悬停事件，但操作必须在鼠标与之交互的元素上：

#myDiv {
    background-color: blue;
}
#myDiv:hover {
    background-color: red;
}

查看jQuery。您的任务可以超级轻松地完成：

$('#myButton').on('click', function() {
    $('#someOtherDiv').show();
}

【讨论】：

jQuery 用于显示/隐藏事件？嘘。尝试基本的 javascript。
你真的认为他有这么大的 JS 需求，需要引入整个 JS 库吗？
谢谢，现在我们在 Web 编码界又有一个人认为 jQuery 可以解决所有问题。辉煌。
哦，我听到了，学习 jQuery 很好（我自己经常使用它），但学习什么时候不使用 jQuery 也很好。它是一个旧图形，但是 => doxdesk.com/img/updates/20091116-so-large.gif
@AlienWebguy - 我同意你的观点，jQuery 非常适合初学者，是一个很好的起点，而且非常强大，而且是所有这些东西。但是如果没有 ELSE 可以做什么的上下文，或者所有可用选项中最好的是什么，或者为什么他们应该这样做，除了“jQuery 解决了我的问题”之外，什么都学不到。

【解决方案2】：

我会收到很多“语义 HTML”响应，但无论如何。你完全可以只用 HTML / CSS 来做到这一点（注意：它只适用于 IE9+ 和所有真正的浏览器......对于 IE8-，JS 它是）。

HTML：

<label for="checkbox" id="checkboxLabel">Show More</label>
<input type="checkbox" id="checkbox" />
<div id="stuffToShow">
    Happy times
</div>

CSS：

#stuffToShow {
    display:none;
}

#checkbox {
    opacity:0.01;
}

#checkbox:checked + #stuffToShow {
    display:block;
}

然后，您可以随意设置label 和checkbox 的样式：这是您可以/应该做的非常简单的版本。

编辑 (2013-06-10)

只是因为没有人愿意在基本的 JS 中展示这一点，老式的 HTML4 方式：

<a href="#" id="ShowDiv" onclick="showHideDiv('ShowMoreDiv');">Show More</a>
<div id="ShowMoreDiv">
    Boo
</>

还有香草 JS：

function showHideDiv(div){
    var x = document.getElementById(div);

    if(x.style.display == 'none'){
        x.style.display = 'block';
    } else {
        x.style.display = 'none';
    }

    return false;
}

在我看来，这也有点不合语义，因为您有一个链接无法将您带到任何地方，但是您可以去。

【讨论】：

成功了！，谢谢 :)
这个答案很傻很不切实际
他问是否可以在 HTML / CSS 中完成。它可以。不知道你如何定义现实，但嘿，随便。
如果你想用 HTML 和 CSS 来做，我会用 :target 代替......
为什么要编辑？现在是 2013 年，你不必再用基本的 JS“HTML4 方式”来做这件事了。这就是图书馆的意义所在。无论如何，每个人都在他们的客户端上缓存了来自 Google CDN 的 jQuery。