预期效果(页面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">全部&nbsp;&nbsp;></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);//隐藏
    })
})

H5点击不同按钮跳转显示不同分页的更多相关文章

  1. PHP——0128练习相关2——js点击button按钮跳转到另一个新页面

    js点击button按钮跳转到另一个新页面 投稿:whsnow 字体:[增加 减小] 类型:转载 时间:2014-10-10我要评论 点击按钮怎么跳转到另外一个页面呢?点击图片要跳转到新的页面时,怎么 ...

  2. js点击button按钮跳转到页面代码

    点击按钮怎么跳转到另外一个页面呢?我们在网站制作中可能是需要的,因为有时我们需要做这样的效果,尤其是将按钮做成一个图片,而点击图片要跳转到新的页面时,怎么做到呢? 这样的效果可以:onclick=&q ...

  3. js点击button按钮跳转到另一个新页面

    点击按钮怎么跳转到另外一个页面呢?我们在网站制作中可能是需要的,因为有时我们需要做这样的效果,尤其是将按钮做成一个图片,而点击图片要跳转到新的页面时,怎么做到呢? 这样的效果可以:onclick=&q ...

  4. js或jquery实现点击某个按钮或元素显示div,点击页面其他任何地方隐藏div

    点击某个元素显示div,点击页面其他任何地方隐藏div,可用javascript和jquery两种方法实现: 一:javascript实现方法技巧<script>//定义stopPropa ...

  5. 如何获取ul 中li选中的值点击button按钮跳转链接

    <ul id="parent"> <li></li> <li></li> <li></li> & ...

  6. iOS实现tableViewCell或collectionCell中点击界面按钮跳转

    //找到父类界面 - (UIViewController *)viewController { for (UIView* next = [self superview]; next; next = n ...

  7. html 按钮跳转问题(及其相关)

    1.点击一个按钮跳转到另一个页面 (网址)   两种写法: <button onclick="{location.href='location.html'}">获取现在 ...

  8. 作用域通信对象:session用户在登录时通过`void setAttribute(String name,Object value)`方法设置用户名和密码。点击登录按钮后,跳转到另外一个页面显示用户

    作用域通信对象:session session对象基于会话,不同用户拥有不同的会话.同一个用户共享session对象的所有属性.作用域开始客户连接到应用程序的某个页面,结束与服务器断开连接.sessi ...

  9. 使用Android点击按钮跳转页面

    1.首先新建一个Android工程,命名为MyApp(名字可以自己随意起); 2.以原有的MainActivity.java文件为登录界面,然后在src文件中的包上面右击选择New目录下的Other中 ...

随机推荐

  1. ubuntu输入正确密码重新跳到登录界面

     原因一:/etc/profile或者/etc/enviroment  配置错误 (很多开发人员在配置完java环境之后容易出现这种情况) 解决办法(已验证): 1,开机后在登录界面按下shift+c ...

  2. 微服务架构 | 4.2 基于 Feign 与 OpenFeign 的服务接口调用

    目录 前言 1. OpenFeign 基本知识 1.1 Feign 是什么 1.2 Feign 的出现解决了什么问题 1.3 Feign 与 OpenFeign 的区别与对比 2. 在服务消费者端开启 ...

  3. CF1574F Occurrences

    考虑什么样的串是合法的. 直接考虑比较抽象,考虑具象化这个问题. 容易发现一个字符串的限制就相当于如果出现了其中一个字符 \(a_i = c\),那么 \(s\) 中 \(c\) 前 \(i - 1\ ...

  4. 布局TabBar

    布局TabBar中的items Tabbar中应该有5个Item 主页/消息/发布按钮/发现/我 布局TabBar中的Items可以通过下面的方式 通过自定义TabBar的方式 多添加一个控制器,让中 ...

  5. bom案例4-模拟滚动条

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  6. 超详细的node/v8/js垃圾回收机制

    前言 垃圾回收器是一把十足的双刃剑.其好处是可以大幅简化程序的内存管理代码,因为内存管理无需程序员来操作,由此也减少了(但没有根除)长时间运转的程序的内存泄漏.对于某些程序员来说,它甚至能够提升代码的 ...

  7. Web集群调度器-Haproxy

    Web集群调度器-Haproxy 目录 Web集群调度器-Haproxy 一.Web集群调度器 1.常用的Web集群调度器 2. Haproxy应用分析 3. Haproxy的主要特性 4. 常用集群 ...

  8. nginx的优化和防盗链

    nginx的优化和防盗链 目录 nginx的优化和防盗链 一.nginx的优化 1. 隐藏版本号 (1)隐藏版本号的原因 (2)查看版本号的方法 (3)隐藏方法一:修改配置文件 (4)隐藏方法二:修改 ...

  9. 微服务技术栈简单介绍,Eureka和Ribbon的引入和使用

    一.了解微服务架构 1.微服务技术栈 整体框架 整体学习规划路线2.微服务与单体架构的区别 单体架构:将业务的所有功能集中在一个项目中开发,打成一个包部署 优势 结构简单 部署成本低 缺点 耦合度高, ...

  10. 解决/WEB-INF目录下的jsp页面引入webRoot下的Js、css和图片的问题

    通常把jsp页面放在webRoot的/WEB-INF下可以防止访问者直接输入页面. 而webRoot的/WEB-INF下的页面是受保护的,用户无法通过形如http://localhost:8080/t ...