Navigation Bar Implementation

　　requirement: Make a navigation bar, click the different product name link, display the corresponding content, and highlight the currently selected item .

Note: The following code is passed: Chrome, FF, IE test

　　HTML+CSS Design: Two solutions available here

First, the use of <li> float:left, to ensure that <li> peer display

• Code section
• Problems encountered and their solutions

Second, the use of <li> Display:inline-block, to ensure that <li> peer display

• Code section
• Problems encountered and their solutions

　　Dynamic implementation effect: Two solutions are also available

First, the implementation based on jquery

• Code section
• Problems encountered and their solutions

Second, the Pure JS implementation

• Code section
• Problems encountered and their solutions

　　Practice Summary

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

Learned people's, but also stole pictures of others ^_^ ~

　　

　　

Navigation Bar Implementation