探讨支付宝导航条制作的实现方法
http://www.itjxue.com 2015-08-07 21:35 来源:未知 点击次数:
介绍支付宝导航条的制作过程，这类TAB很普遍，许多网站都会使用，用的这类导航条，本文算不上什么深奥的技术，只是探讨下这种导航效果的实现过程。
其实也算不上教程，也就是自己没事儿的时候做点东西然后发上来大家交流交流，希望大家不吝赐教^!^
因为刚看过亚东的教程和这个有点相似，所以就自己琢磨了一下写了一个仅用到一小段的JS就搞定了。亚东的里面要用到JQuery。我感觉要是简单一点的东西直接上JS就行了，有大量需求时再调用库才好。
核心HTML代码如下：
注意：
- 菜单项是可以自由扩展的，前提是复制代码中类名为“sub-item”红色列表标签。也就是copy这个ul标签的所有内容粘贴其后就行。
- 类名为“sub-item”列表标签ul的id属性依次类加就OK了，如：sub-item1,sub-item2,sub-item3…
- 类名为“active”的蓝色列表标签表示载入时的默认菜单项。
核心JavaScript代码：
主要功能是：子菜单项随着菜单项变化而变化的效果(类似tab选项卡)。
JS代码就不多做解释了，重要部分我已经给出注释。因为我也是菜鸟，费了很大劲才实现效果，还希望高手多多指点。
CSS代码有点小多我就不贴出来了，其实核心代码就那几句，主要为了仿制得完美就得多写一点啦！有兴趣的同学直接下载我的源码研究。有什么问题直接给我留言^!^