css - 单击带有css的按钮时显示div

Question

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

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

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

Answer 1

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

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

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

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

Answer 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;
}

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