预期效果(页面1):

点击后显示对应的内容(页面2):


HTML(页面1):
添加 onclick 跟 data-index
<!-- 3我的订单 -->
<div class="member_box3">
<div class="member_box3_top">
<div class="member_box3_top_left">我的订单</div>
<div class="member_box3_top_right" onclick="oneJump()" data-index="1">全部 ></div>
</div>
<div class="member_box3_bottom">
<div class="member_box3_bottom_son" onclick="oneJump()" data-index="1">
<div class="member_box3_bottom_img">
<img src="data:images/order1.png" />
</div>
<div class="member_box3_bottom_son_num">3</div>
<div class="member_box2_son_name">未完成</div>
</div>
<div class="member_box3_bottom_son" onclick="twoJump()" data-index="2">
<div class="member_box3_bottom_img">
<img src="data:images/order2.png" />
</div>
<div class="member_box3_bottom_son_num">5</div>
<div class="member_box2_son_name">待完成</div>
</div>
<div class="member_box3_bottom_son" onclick="threeJump()" data-index="3">
<div class="member_box3_bottom_img">
<img src="data:images/order3.png" />
</div>
<div class="member_box3_bottom_son_num">22</div>
<div class="member_box2_son_name">已结束</div>
</div>
<div class="member_box3_bottom_son" onclick="fourJump()" data-index="4">
<div class="member_box3_bottom_img">
<img src="data:images/order4.png" />
</div>
<div class="member_box3_bottom_son_num">14</div>
<div class="member_box2_son_name">已退款</div>
</div>
</div>
</div>
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);//隐藏
})
})
- PHP——0128练习相关2——js点击button按钮跳转到另一个新页面
js点击button按钮跳转到另一个新页面 投稿:whsnow 字体:[增加 减小] 类型:转载 时间:2014-10-10我要评论 点击按钮怎么跳转到另外一个页面呢?点击图片要跳转到新的页面时,怎么 ...
- js点击button按钮跳转到页面代码
点击按钮怎么跳转到另外一个页面呢?我们在网站制作中可能是需要的,因为有时我们需要做这样的效果,尤其是将按钮做成一个图片,而点击图片要跳转到新的页面时,怎么做到呢? 这样的效果可以:onclick=&q ...
- js点击button按钮跳转到另一个新页面
点击按钮怎么跳转到另外一个页面呢?我们在网站制作中可能是需要的,因为有时我们需要做这样的效果,尤其是将按钮做成一个图片,而点击图片要跳转到新的页面时,怎么做到呢? 这样的效果可以:onclick=&q ...
- js或jquery实现点击某个按钮或元素显示div,点击页面其他任何地方隐藏div
点击某个元素显示div,点击页面其他任何地方隐藏div,可用javascript和jquery两种方法实现: 一:javascript实现方法技巧<script>//定义stopPropa ...
- 如何获取ul 中li选中的值点击button按钮跳转链接
<ul id="parent"> <li></li> <li></li> <li></li> & ...
- iOS实现tableViewCell或collectionCell中点击界面按钮跳转
//找到父类界面 - (UIViewController *)viewController { for (UIView* next = [self superview]; next; next = n ...
- html 按钮跳转问题(及其相关)
1.点击一个按钮跳转到另一个页面 (网址) 两种写法: <button onclick="{location.href='location.html'}">获取现在 ...
- 作用域通信对象:session用户在登录时通过`void setAttribute(String name,Object value)`方法设置用户名和密码。点击登录按钮后,跳转到另外一个页面显示用户
作用域通信对象:session session对象基于会话,不同用户拥有不同的会话.同一个用户共享session对象的所有属性.作用域开始客户连接到应用程序的某个页面,结束与服务器断开连接.sessi ...
- 使用Android点击按钮跳转页面
1.首先新建一个Android工程,命名为MyApp(名字可以自己随意起); 2.以原有的MainActivity.java文件为登录界面,然后在src文件中的包上面右击选择New目录下的Other中 ...
随机推荐
- 多线程创建的方式一(继承Thread类)
1 package multithread; 2 3 /* 4 * 如何创建一个线程呢? 5 * 6 * 创建线程方式一:继承Thread类. 7 * 8 * 步骤: 9 * 1,定义一个类继承Thr ...
- Ali云组件概念
- Android Compose的Window Insets
Android Compose的Window Insets 除了app的内容区域外, 还有一些其他的固定元素会显示在手机屏幕上, 顶部的状态栏, 刘海, 底部的导航栏, 还有输入法键盘, 它们都是系统 ...
- 多种方式告诉你如何计算DM同步数据到TiDB的延时时间
背景 用户在做技术选型的过程中,总是会对一些数据指标比较关心,特别是在和竞品相比较的时候,更加需要一些有说服力的数据.基于MySQL开发的项目在迁移到TiDB的时候,使用DM同步数据是必不可少的一个环 ...
- 「JOISC 2014 Day1」巴士走读
「JOISC 2014 Day1」巴士走读 将询问离线下来. 从终点出发到起点. 由于在每个点(除了终点)的时间被过来的边固定,因此如果一个点不被新的边更新,是不会发生变化的. 因此可以按照时间顺序, ...
- bom-setInterval
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- iOS应用跳转至app store 评分页
小功能之去AppStore评分 #pragma mark - 去AppStore评分 -(void)goToAppStore { NSString *str = [NSString stringWit ...
- ValueStack与ContentMap (ActionContext.getContext().getValueStack().set())
在方法 <action name="zilei" class="dtreeAction" method="zilei"> & ...
- DatabaseMetaData
getColumns public ResultSet getColumns(String catalog, String schemaPattern, String tableNamePattern ...
- 「游记」NOIP 2021 爆零记
推荐访问本人自建博客 \(\text{cjwen.top}\) 欧拉欧拉欧拉欧拉欧拉欧拉欧拉欧拉,第一次参加 \(NOIP\),欧拉欧拉欧拉欧拉欧拉欧拉欧拉欧拉. 第一题比较简单,用类似于筛质数的做法 ...