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

在我看来，这也有些无意义，因为你有一个链接不会带你到哪里，但是你可以去。

单击带有css的按钮显示div

2 个答案: