老师,点击显示隐藏没有效果
来源:2-2 静静的显示和隐藏(1)
陈莺莺呀
2019-11-19 09:22:00
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>showhide</title>
<link rel="stylesheet" href="../css/base.css">
<style>
body{
width:400px;
margin:0 auto;
}
.btn{
width:50%;
height:30px;
float:left;
}
#box{
width:100%;
height:200px;
background-color:pink;
}
</style>
</head>
<body>
<button id="btn-show" class="btn">显示</button>
<button id="btn-hide" class="btn">隐藏</button>
<div id="box"></div>
<script src="../js/jquery-1.7.1.js"></script>
<script>
var silent={
show:function($elem,showCallback,shownCallback){
//$elem.html('<p>我要显示了</p>');
if(typeof showCallback==='function'){
showCallback();
}
if(typeof shownCallback==='function'){
shownCallback();
}
$elem.show();
// setTimeout(function(){
// $elem.html($elem.html()+'<p>我已经显示了</p>');
// },1000);
},
hide:function($elem){
$elem.hide();
}
};
var css3={
fade:{
show:function(){
},
hide:function(){
}
},
slideUpDown:{
show:function(){
},
hide:function(){
}
},
slideLeftRight:{
show:function(){
},
hide:function(){
}
},
fadeSlideUpDown:{
show:function(){
},
hide:function(){
}
},
fadeSlideLeftRight:{
show:function(){
},
hide:function(){
}
}
};
var js={
fade:{
show:function(){
},
hide:function(){
}
},
slideUpDown:{
show:function(){
},
hide:function(){
}
},
slideLeftRight:{
show:function(){
},
hide:function(){
}
},
fadeSlideUpDown:{
show:function(){
},
hide:function(){
}
},
fadeSlideLeftRight:{
show:function(){
},
hide:function(){
}
}
};
var $box=$('#box');
$('#btn-show').on('click',function(){
slient.show($box,function(){
$box.html('<p>我要显示了</p>');
},function(){
setTimeout(function(){
$box.html($box.html()+'<p>我已经显示了</p>');
},1000);
});
});
$('#btn-hide').on('click',function(){
slient.hide($box);
});
</script>
</body>
</html>
1回答
同学你好,当运行同学的代码时,没有发生报错信息,而且逻辑正确,这个时候我们就要考虑是不是单词拼错了,因为功能不能实现,所以就可能是显示和隐藏方面的问题,检查一下,果然单词拼错了,参考:
改正后就可以正常实现了。
如果我的回答帮助到了你,欢迎采纳,祝学习愉快~
相似问题