最近在公司接到一个需求,里面有一个三级跳转。类似于选择地址的时候,选择的顺序是:省份->市->区。如果分三个页面跳转,那么体验非常不好,如果引入其他框架做成单页应用,又比较麻烦。所以可以用js把这一块做成单页应用的样子。。。
主要思路
通过改变url的hash值,跳到相应模块。先把默认模块显示出来,其他模块隐藏,分别给三个模块定义三个hash值,点击默认模块的选项的时候,改变hash值,同时在window上监听hashchange事件,并作相应模块跳转逻辑处理。这样即可模拟浏览器的前进后退,而且用户体验也比较好。
下面详细来看看,现在有一个场景,选择顺序是:车牌子->车型->车系。
首先HTML部分。默认显示车牌子选择列表,其他两个模块隐藏。
品牌
大众