H5点击不同按钮跳转显示不同分页
预期效果（页面1）：
点击后显示对应的内容（页面2）：
HTML（页面1）：
添加 onclick 跟 data-index
我的订单
全部 >
3
未完成
5
待完成
22
已结束
14
已退款
HTML（页面2）结构：
写好选项卡切换，给对应显示的4个选项卡设置对应的类名，例如我这里的object_box1，object_box2……
JS：
// 跳转分页(我的订单) function oneJump() { window.location.href="member-order.html?data=1"; } function twoJump() { window.location.href="member-order.html?data=2"; } function threeJump() { window.location.href="member-order.html?data=3"; } function fourJump() { window.location.href="member-order.html?data=4"; }// 选项卡 $(function(){ // 判断来自哪个div的点击然后进行页面显示 var url = location.search; var subnum = url.substring(url.length - 1); if (subnum == 1) { $('.object_box1').siblings('div').hide(); $('.select>div:eq(0)>div').removeClass('select_son_capsule1').addClass('select_son_capsule0'); } else if (subnum == 2) { $('.object_box2').siblings('div').hide(); $('.select>div:eq(1)>div').removeClass('select_son_capsule1').addClass('select_son_capsule0'); } else if (subnum == 3) { $('.object_box3').siblings('div').hide(); $('.select>div:eq(2)>div').removeClass('select_son_capsule1').addClass('select_son_capsule0'); } else { $('.object_box4').siblings('div').hide(); $('.select>div:eq(3)>div').removeClass('select_son_capsule1').addClass('select_son_capsule0'); }
$(".select>div").mouseover(function(){ var index=$(this).index();//获取 $(".select_son2>div").removeClass('select_son_capsule0').addClass('select_son_capsule1');//删除样式 $(".select>div:eq("+index+")>div").removeClass('select_son_capsule1').addClass('select_son_capsule0');//指定添加样式
$(".object>div:eq("+index+")").fadeIn(0);//显示 $(".object>div:eq("+index+")").siblings("div").fadeOut(0);//隐藏 }) })