搜索

JQUery事件切换

原创 2019-04-02 21:22:38 307
摘要:<!DOCTYPE html><html><head><meta charset="utf-8"> <title>jQuery事件切换</title> <script type="text/javascript"src="jquery-3.3.1.min.js"

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>jQuery事件切换</title>

<script type="text/javascript"src="jquery-3.3.1.min.js"></script>

<style type="text/css">

  div{width:100px;height:100px; background: #ccc;margin:20px auto;}

  #bout{width:50px;height:30px;background:yellow;margin:50px auto;}

</style>

</head>

<body>

<script type="text/javascript">

   $(document).ready(function(){

        $('div').hover(

        function(){

         $(this).css('background','red')

         },

        function(){

          $(this).css('background','green')

        }

    )

    

    $('button').click(function(){

    $('div').toggle().css('background','red')

    })


     })


 


</script>



<div style="display:none">这是导航内容

<button style="align:center">点击消失</button>

</div>

<button id="bout">导航</button>

</body>

</html> 


批改老师:查无此人批改时间:2019-04-03 13:15:59
老师总结:完成的不错。jq语句,每行结束最后增加;号。继续加油

发布手记

热门词条