伸缩自如的导航栏
【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 演示请查看RunJS： http://sandbox.runjs.cn/show/us82aiml 需要完成的功能点包括： 不同页面，tab数是不固定的，所以每个tab的宽度需要自适应，比如2个时各占1/2，3个时1/3，四个时1/4，默认是1/3。tab数超出4个时，会折行显示。这个是通过“元素范围选择器”来实现的，即综合利用 nth-child 、 nth-last-child 、 first-child 、 last-child 来组合实现。 tab之间，可能有分界线。如果通过margin实现，很容易导致不合理的折行，因此利用border模拟分隔符的效果。此时需要设置盒模型为border-box，并且不支持完全透明效果。 屏幕向下滚动足够距离时，自动吸附到顶部（固定定位）。通过 fixed 样式实现。 固定定位状态下，导航栏可以“变身”为另一种形式，也可以不变。通过 fixed+multi 组合样式实现。 变身模式下，支持折叠和展开效果。通过 fixed+fold 组合实现。 变身模式下，展开层的tab列表和原本的tab列表是一一对应的，只是样式不同。通过初始化时复制一份拷贝，外加独立 multi 样式重定义实现。 切换tab时，需要保持两个列表状态同步更新。通过类似于 jQuery.index()