jQuery快速高效制作网页交互特效第五章课后4
来源:互联网 发布:淘宝pc端优惠券地址 编辑:程序博客网 时间:2024/06/05 07:56
<!DOCTYPE html><html> <head> <title>shangji4.html</title> <script type="text/javascript" src="js/jquery-1.11.1.js"></script> <style type="text/css"> * { margin: 0px; padding: 0px; font-size: 12px; } a { color: #000; text-decoration: none; } #menu { margin: 30px; width: 188px; background-color: #EFFDFA; } #menu .top { height: 40px; line-height: 40px; font-size: 14px; font-weight: bold; text-align: center; border: 1px solid #93D6C5; border-bottom: none; } #menu ul.nav { list-style: none; } #menu ul.nav li { display: block; height: 30px; line-height: 30px; border: 1px solid #93D6C5; border-top: none; padding-left: 30px; background: url(图片/point.jpg) no-repeat 15px center; } #menu ul.nav li.lastone { border: none; cursor: pointer; background: #fff url(图片/up.jpg) no-repeat center top; } #menu ul.nav li.up { background: #fff url(图片/down.jpg) no-repeat center top; } span.icon { float: right; margin-right: 10px; margin-top: 10px; } </style> <script type="text/javascript"> $(function () { $("#menu li.lastone").click(function () { //切换菜单 $("#menu li:gt(8):not(:last)").toggle(); //更换底部夹头方向 $(this).hasClass("up") ? $(this).removeClass("up") : $(this).addClass("up"); }); //添加箭头 $("#menu .nav li a").after('<span class="icon"><img src="图片/icon1.jpg"></span>'); }); </script> </head> <body><div id="menu"> <div class="top">全部商品详细分类</div> <ul class="nav"> <li><a href="#">尾品汇</a></li> <li><a href="#">图书音像数字管</a></li> <li><a href="#">孕、婴、童</a></li> <li><a href="#">美妆个护</a></li> <li><a href="#">家具、家纺、家装</a></li> <li><a href="#">服饰、内衣</a></li> <li><a href="#">鞋靴、箱包</a> </li> <li><a href="#">珠宝装饰</a></li> <li><a href="#">手表/眼镜/礼品</a></li> <li><a href="#">运动户外</a></li> <li><a href="#">瘦体/保健/成人</a></li> <li><a href="#">食品、茶、酒</a></li> <li><a href="#">手机、数码</a></li> <li><a href="#">电脑办公</a></li> <li class="lastone"></li> </ul> </div> </body></html>
0 0
- jQuery快速高效制作网页交互特效第五章课后4
- jQuery快速高效制作网页交互特效第五章课后5
- 使用Jquery快速高效制作网页交互特效
- jQuery快速高效制作网页第五章上机4
- 使用jQuery 快速高效制作 网页特效
- JQuery制作简单的网页导航特效
- jQuery快速高效制作网页—————改变背景图像
- 网页特效与交互
- 网页制作特效
- jQuery制作动画特效
- jQuery制作滑动特效
- 《JQuery基础教程》第四版课后练习代码--第五章
- JQuery 第五章 事件和动画 上机+课后
- 《学习OpenCV》第五章课后题4
- 网页定位导航特效制作
- jquery制作拉开帷幕特效
- JQuery制作小风车特效
- jquery网页特效地址收藏
- 自定义打印方法
- StringBuffer与StringBuilder的区别
- loading的实现(css3)
- Spring JPA 复杂条件查询
- IntelliJ IDEA
- jQuery快速高效制作网页交互特效第五章课后4
- Linux下安装Redis并添加PHP扩展(自己测试了没有问题)
- MarkDown 语法手册
- 整合Spring+SpringMVC+MyBatis
- Timer实例
- Android Studio利用Gradle删除没有使用到的资源和代码文件
- java对象和json对象之间互相转换(下)
- ssm搭建笔记
- Android开发报Can't create handler inside thread that has not called Looper.prepare()错误