专栏首页编程微刊jQuery实现从一个页面跳转到另一个页面的指定tab选项卡

jQuery实现从一个页面跳转到另一个页面的指定tab选项卡

最近事情比较多,小婷已经没有足够的时间去学习新的知识点,就写一写简单的东西吧,这些还是从前学习前端的时候留下的课堂的笔记,那个时候喜欢记笔记,觉得总是有用的上的地方,毕竟好记性不如烂笔头。

思路:

从页面 a 通过 url ? 后面的参数给页面b 传一个 index,页面b通过这个参数来控制该选项卡的切换

a页面:

<a href="b.html?type=1">校园招聘</a>
<a href="b.html?type=2">社会招聘</a>
<a href="b.html?type=3">名企招聘</a>

b页面:

1:获取 被访问时的 url
2:获取该url  = 后面的数字 (id)
3:使用传过来的 数字 (id) 来控制该选项卡的切换

实际代码参考 a.html

<!DOCTYPE html>
<html lang="en" class="no-js">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title></title>
    </head>
    <body>
        <a href="b.html?type=1">校园招聘</a>
        <a href="b.html?type=2">社会招聘</a>
        <a href="b.html?type=3">名企招聘</a>
    </body>
</html>

b.html

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>tab-JQ</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                list-style: none;
            }           
            #wrap {
                margin: 90px 290px;
            }
            
            #tit {
                height: 30px;
                width: 600px;
            }
            
            #tit span {
                float: left;
                height: 30px;
                line-height: 30px;
                width: 200px;
                font-size: 20px;
                text-align: center;
                color: #000000;
                border-top: 1px solid #CCCCCC;
            }
            
            #con li {
                display: none;
                width: 600px;
                border: 1px solid #CCCCCC;
                font-size: 30px;
                line-height: 200px;
                text-align: center;
            }
            
            #tit span.select {
                background: #d6e9fd;
                color: #ffffff;
            }       
            #con li.show {
                display: block;
            }
        </style>
        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    </head>

    <body>
        <div id="wrap">
            <div id="tit">
                <span class="select">校园招聘</span>
                <span>社会招聘</span>
                <span>名企招聘</span>
            </div>
            <ul id="con">
                <li id="1" class="show">校园招聘校园招聘校园招聘</li>
                <li id="2">社会招聘社会招聘社会招聘</li>
                <li id="3">名企招聘名企招聘名企招聘</li>
            </ul>
        </div>
        <script>
            //选项卡
            $('#tit span').click(function() {
                var i = $(this).index(); //下标第一种写法
                //var i = $('tit').index(this);//下标第二种写法
                $(this).addClass('select').siblings().removeClass('select');
                $('#con li').eq(i).show().siblings().hide();
            });

            // 获取 被访问时的 url
            var ur = location.href;
            // 获取该url  = 后面的数字 (id)
            var type = ur.split('?')[1].split("=")[1];

            // 使用传过来的 数字 (id) 来控制该选项卡的切换
            // 其实就是从页面 A 通过 URL ? 后面的参数 给页面B 传一个 index

            $('#tit span').eq(type - 1).addClass('select').siblings().removeClass('select');
            $('#con li').eq(type - 1).show().siblings().hide();
        </script>
    </body>

</html>
 

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • ajax实现简单的点击左侧菜单,右侧加载不同网页

    王小婷
  • 网页里如何使用js屏蔽鼠标右击事件

    在后台管理系统里面,遇到了这样的一个问题,右击ztree菜单,弹出修改界面,但是,现在确实这样的,右击默认弹出功能提示的框框,看上去似乎很影响自己想要的功能,只...

    王小婷
  • 基于jQuery的公告无限循环滚动实现代码

    基于jQuery的公告无限循环滚动实现代码,效果如下,多用于pc端电商网站之中不断的循环更新的公告消息。

    王小婷
  • python测试开发django-20.添加创建时间DateTimeField

    我们在admin后台发布一篇文章的时候,一般会有创建时间和最后更新时间这2个字段,创建时间就是第一次编辑文章的时候自动添加的,最后更新时间就是每次修改文章的内容...

    上海-悠悠
  • 黑客帝国这样实现!马斯克Neuralink发布会详解人脑实验

    昨天,马斯克(Elon Musk)的 Neuralink 公司发布了最新的脑机接口技术,在发布会上,我们得知,马斯克的新一代脑机接口分为以下四个方面:

    新智元
  • 素数之魂——黎曼和他的伟大猜想

    大数据文摘
  • ROS(indigo)ROSPlan框架

    源码地址:https://github.com/KCL-Planning/ROSPlan/wiki

    zhangrelay
  • 数据解析之XPath & lxml库

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

    村雨遥
  • JavaScript高级

    首先更正一个小问题,昨天的JavaScript入门一文中,末尾的“网页换肤”这个小案例的代码插入的有问题,插入的是名片案例的代码,排版不严谨向您致歉,现在补发更...

    小闫同学啊
  • xpath库详解xpath入门获取所有节点 //子节点 /父节点 ..属性匹配 @文本获取按序选择节点轴选择

    python爬虫抓取网页内容,需要对html或xml结构的数据进行解析,如果用正则,单是写正则表达式就让很多望而生畏了。

    章鱼喵

扫码关注云+社区

领取腾讯云代金券