导航栏实现

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

  注:以下代码通过: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/

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

  

  

 

 

posted @ 2014-12-13 21:39  gyy_Jade  阅读(280)  评论(0编辑  收藏  举报