使div不可见,点击链接后使其可见

时间:2014-02-10 21:18:21

标签: html css

我有两个不同的div我想让其中一个看不见,点击链接或按钮后我希望它可见而另一个看不见。我不知道javascript所以我只知道HTML和CSS。我可以只使用HTML和CSS来做到这一点吗?我该怎么做?感谢。

1 个答案:

答案 0 :(得分:2)

你需要使用jQuery。 只需将此行添加到您的头标记中:

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js">

如果你的HTML是这样的:

<div id="div1">This is div1</div>
<div id="div2">This is div2</div>
<button id="button1">Toggle divs</button>

CSS:

#div2 {
    display:none;
}

在页面底部,在结束标记</body>之前添加以下JavaScript:

<script>
    $("#button1").on("click", function () {
        $("#div1, #div2").toggle();
    }
</script>

以下是类似示例的链接:

http://api.jquery.com/toggle/#entry-examples