您的位置：首页 > Web前端 > JQuery

Web开发之－JQuery 显示与隐藏

2017-05-15 00:00 148 查看

这是Js代码

/**
* Created by Julis on 17/5/15.
*/
$(document).ready(function(){
$("#btn").click(function(){
$("#t").hide(1000);
});
$("#show").click(function(){
$("#t").show(1000);
});
$("#showandhide").click(function () {
$("#t").toggle(1000);
});
});

html代码
`<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<title>显示与隐藏</title>
<script src="jquery-2.1.1.js"></script>
<script src="yincangyuxianshi.js"></script>
<style>
div{
background: #eee234;
width: 50px;
height: 50px;
float: left;
margin-left: 20px;
}
</style>
</head>

<p id="t">这是内容哈哈哈</p>
<p>只是隐藏 <button id="btn" >隐藏</button></p>
<p>只是显示 <button id="show" >显示</button></p>
<p>既显示又隐藏 <button id="showandhide" >隐藏与显示</button></p>
<p>点击实现隐藏</p>
<script>
for(var i =0;i<5;i++){
$("<div>").appendTo(document.body);//创建新的div
}
$("div").click(function(){
$(this).hide(500);
});
</script>

</body>
</html>`

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航