首页 > 其他 > 详细

导航栏实现

时间:2014-12-13 23:02:34      阅读:387      评论:0      收藏:0      [点我收藏+]

  需求:做一个导航栏,单击不同的商品名称链接,显示相应的内容,同时高亮显示当前选择的商品

  注:以下代码通过:chrome、FF、ie的测试


 

  html+css的设计:这里提供两种解决方法


 

  一、使用<li>的float:left,保证<li>同行显示

  • 效果图
  • 代码部分
  • 遇到的问题及解决方案

  二、利用<li>的display: inline-block,保证<li>同行显示

  • 效果图
  • 代码部分
  • 遇到的问题及解决方案

 

  动态实现效果:同样也提供两种解决方法


 

  一、基于jQuery的实现

  • 效果图
  • 代码部分
  • 遇到的问题及解决方案

  二、纯粹的js实现

  • 效果图
  • 代码部分
  • 遇到的问题及解决方案

  实践总结


 

  thx:http://ued.taobao.org/blog/2012/08/inline-block/

  学了人家的,还偷了人家的图片^_^~

  bubuko.com,布布扣

  

 

 

导航栏实现

原文:http://www.cnblogs.com/Iwillknow/p/3604350.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!