网站品牌列表效果

1、以下是某网站上的一个品牌列表的展示效果,用户进入该页面时,品牌列表默认是精简显示的。

2、用户可以单击商品列表下方的“显示全部品牌”按钮来显示全部的品牌。

3、单击“显示全部品牌”按钮的同时,列表会将推荐的品牌的名字高亮显示,按钮李的文字也换成了“精简显示品牌”。

4、再次单击,返回之前的状态

html代码:


css代码:


js代码:


效果展示:


鼠标点击显示全部品牌后的效果:


喜欢的话,请关注我哦!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,972评论 25 709
  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AI阅读 16,026评论 3 119
  • 体验入 能量激活,能量持续,能量显现 找核心 有能量就可以有动力,才能去思维有想法,马上行动才有结果 转身用 能量...
    Una笑笑阅读 402评论 0 0
  • 在告别 Java 五年之后, 今年算是正式从 C++ 世界重回 Java 世界了. 当年 Java 6 才出来, ...
    老瓦在霸都阅读 299评论 0 0
  • 日精进【打卡第143天】: 姓名:余成杰 公司:贞观电器 盛和塾《六项精进》224期学员 【知-学习】 《六项精进...
    余成杰阅读 93评论 0 0