lcgyh / myDocs

0 stars 0 forks source link

点击按钮,显示隐藏内容,再次点击按钮,内容又隐藏 #36

Open lcgyh opened 6 years ago

lcgyh commented 5 years ago
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="http://r01.uzaicdn.com/content/v1/styles/subject.css"> 
    <link rel="stylesheet" href="styles/lianxi.css">
    <script src="http://r01.uzaicdn.com/content/v1/scripts/core.js"></script>
    <script src="scripts/lianxi.js"></script>
    <!--[if lt IE 9]><script src="//r.uzaicdn.com/content/libs/html5shiv.js"></script><![endif]-->
    <!--[if IE 6]><script src="//r.uzaicdn.com/content/libs/dd_belatedpng_0.0.8a-min.js" type="text/javascript"></script><script>DD_belatedPNG.fix('.png');</script><![endif]-->
    <style type='text/css'>
        .box{width: 100px;height: 30px;background: #FA6A2F;text-align: center;line-height: 30px;border-radius: 10px;cursor: pointer;color: #fff;}
        .on{display: none;}
    </style>
</head>
<body>
    <div class="box">领取红包</div>
    <p class="main on">恭喜您获得300元红包抵用券</p>
</body>
 <script>
    $(function () {
    var o=$(".main");
    $('.box').on('click', function () {
       if(!o.hasClass('on')){
           o.addClass('on')
       }else{
           o.removeClass('on');
       }
    });
})
 </script>
</html>