jQuery第三十三天练习

<html ><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="js/jquery-3.4.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.box a').click(function(){ $('.one').slideToggle(); $(this).toggleClass('active'); }); $('.box p').hover(function(){ $(this).addClass('hover'); },function(){ $(this).removeClass('hover'); }); }); </script> <style type="text/css"> * { padding:0; margin:0;} body { font-size:12px;} a { text-decoration:none; color:#000; font-family:"宋体"; outline:none; } .box { width:500px; margin:0 auto;} .one { height:333px; background:#eee; display:none; } .box p { border-top:5px solid #ccc; background:url(images/demo_08_1.gif) no-repeat center top; } .box p a { display:block; width:140px; height:40px; ; margin:0 auto; line-height:40px; text-align:center; font-size:14px; font-weight:bold; padding-right:10px; background:url(images/demo_08_2.gif) no-repeat right -45px} .box p.hover { background:url(images/demo_08_3.gif) no-repeat center top;} .box p a.active { background:url(images/demo_08_2.gif) no-repeat right 12px;} </style></head><body> <div>

世良情感网

轻鸟评职场技能