jQuery快速高效制作网页第五章上机4
2017-04-26 17:27
561 查看
<!DOCTYPE html> <html> <head> <title>shangji4.html</title> <script type="text/javascript" src="js/jquery-1.11.1.js"></script> <style type="text/css" > .one{ width:600px; font-size:12px; } .one .top{ background-color:#fff; height:33px; line-height:33px; width:700px; padding-left:28px; color:#168750; font-weight:bold; margin-top:10px; } .iocn{ display:block; width:14px; height:14px; background-image:url(images/+.jpg); background-repeat:no-repeat; float:left; margin:10px 0px 0px 3px; padding-right:10px; } .one span.jian{ background-image:url(images/-.jpg); } .one span.jia{ background-image:url(images/+.jpg); } .one div.bgreen{ background-image:url(images/bg.jpg); } div.content{ display:none; padding:5px; width:716px; border:1px solid #D9EFED; } </style> <script type="text/javascript"> $(document).ready(function(){ $(".top").hover(function(){ $(this).addClass('bgreen'); },function(){ $(this).removeClass('bgreen'); }); $(".top").toggle( function(){ $(this).removeClass("jia").addClass('jian'); $(this).next().show(1500); }, function(){ $(this).removeClass("jian").addClass('jia'); $(this).next().hide('slow'); }); }); </script> </head> <body> <div id="fq"> <div class="one"> <div class="top"><span class="iocn"></span>什么是人身保险?</div> <div class="content"> <img src="图片/gd.jpg" /><br/> <p>人身保险是人的寿命和身体为...... </p> </div> </div> <div class="one"> <div class="top"><span class="iocn"></span>什么是保险合同?</div> <div class="content"> <img src="图片/gd.jpg" /><br/> <p>保险合同是......</p> </div> </div> <div class="one"> <div class="top"><span class="iocn"></span>什么是保险人?</div> <div class="content"> <img src="图片/gd.jpg" /><br/> <p>保险人是......</p> </div> </div> <div class="one"> <div class="top"><span class="iocn"></span>什么是投保人?</div> <div class="content"> <img src="图片/gd.jpg" /><br/> <p>投保人是......</p> </div> </div> </div> </body> </html>
相关文章推荐
- jQuery快速高效制作网页交互特效第五章课后4
- jQuery快速高效制作网页交互特效第五章课后5
- jQuery快速高效制作网页—————改变背景图像
- 使用JQuery快速高效制作网页交互特效第二章到第七章
- jQuery快速高效制作网页交互特效
- 使用JQuery快速高效制作网页特效1章
- 使用jQuery 快速高效制作 网页特效
- 使用JQuery快速高效制作网页交互特效
- 使用Jquery快速高效制作网页交互特效
- 快速制作网页的方法
- Jquery快速制作双色表格
- Jquery快速制作双色表格
- Cleaver快速制作网页PPT
- Html js和jquery制作导航条时鼠标快速滑动导致下拉菜单不断执行
- 利用扩展双屏技术及Chrome浏览器,快速剖析优秀网页Div及CSS构成,并高效实现原型创作
- Jquery 网页右侧快速回复表单,无刷新提交
- 8、网页制作Dreamweaver(jQuery基础:安装、语法)
- 网页制作辅助工具-jQuery标尺参考线插件
- html+jquery制作网页地图
- [置顶] 通过JavaScript脚本来实现网页视频聊天室的快速制作