栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

jQuery实战之品牌展示列表效果

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

jQuery实战之品牌展示列表效果

只是初始状态;

这是点击后效果。首相分析下需求:
1,首先在页面中创建导航,单击标题的时候,隐藏内容,同时小图标也改变。
2,单击更多的时候,显示隐藏的链接内容,并将"更多"变成"简化",改变小图标,并高亮部分链接。
下面是完整代码:
复制代码 代码如下:




text


*{ margin:0;padding:0;}
body{ font-size:13px;}
#wraper{ border:1px solid #ccc; width:301px; overflow:hidden;}
#wraper .Head{ background;#eee; padding:8px; height:18px; cursor:pointer;}
#wraper .Head h3{ float:left;}
#wraper .Head span{ float:right; margin-top:3px;}
#wraper .Content{ padding:8px;}
#wraper .Content ul{ list-style:none; list-style-type:none;}
#wraper .Content ul li{ float:left; width:95px; height:23px; line-height:23px;}
#wraper .Bot{ float:right; padding-top:5px; padding-bottom:5px;}
.GetFocus{ background:#eee;}
.one{ color:#ff8000;}






图书分类




  • 小说(1000)

  • 文艺(1000)

  • 知音(1000)

  • 少儿(1000)

  • 生活(1000)

  • 社科(1000)

  • 广利(1000)

  • 美女(1000)

  • 儿童(1000)

  • 老人(1000)

  • 少年(1000)

  • 青年(1000)

  • 成年(1000)

  • 女人(1000)

  • 父亲(1000)

  • 木青(1000)

  • 母亲(1000)

  • 妹妹(1000)

  • 其他(1000)




更多





转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/114310.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号