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

jQuery实战学习之点击显示和隐藏

2017-11-13 22:13 330 查看 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../Js/jquery-1.7.2.min.js"></script>
<style>
button {
width: 50px;
height: 20px;
text-align: center;
line-height: 20px;
border-radius: 5px;
border: none;
outline: none;
background: darkorange;
color: #FFFFFF;
}
div {
width: 200px;
height: 100px;
background: pink;
font-size: 16px;
display: none;
}
</style>
</head>
<body>
<button>显示</button>
<div>这是要展示的盒子</div>
</body>
<script>
$(function () {
var $btn = $('button');
var $div = $('div');
/* $btn.on('click', function (){
if($div.is(':visible')){//如果是展示的就隐藏
$div.hide();
$btn.text('展示');
}else {
$div.show();
$btn.text('隐藏');
}*/

//可用toggle方法代替

$btn.toggle(function () {
$div.show();
$btn.text('隐藏');
}, function () {
$div.hide();
$btn.text('展示');
});
        });    });</script></html>
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航