导航栏实现

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

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

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

　　

　　

 

 

转载于:https://www.cnblogs.com/Iwillknow/p/3604350.html