A页面：

<!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页面：

<!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>

A页面跳转到B页面后打开指定tabs标签的更多相关文章

  1. Chrome升级后打开新的标签页变样了……

    最近更新Chrome后,打开新的标签页完全变样了,让人不知所措,特别是没有了那个“最近关闭标签页”按钮,这让我抓狂…… PS:Chrome版本号为:29.0.1547.76 m PPS:最新版已无法修 ...

  2. js页面用定时任务通过AJAX获取后台数据，但是从这个页面跳转到其他页面后，定时任务仍然在定时请求后台

    setInterval(function(){//ajax 请求后台数据},1000);这个是A页面的定时器然后我在A页面通过其他请求跳转到其他页面之后后台发现A页面的定时器的那个请求仍然在执行为什么 ...

  3. 使用iframe框架后的页面跳转时目标页面变为iframe的子页面的问题

    <frameset rows="4,200,10,*,120" cols="*" framespacing="0" framebord ...

  4. SpringMVC如何从默认的index.jsp页面跳转到其他页面

    最近学习SpringMVC时,想要做一个登录页面Login.jsp,发现Tomcat服务器默认进入的页面是WEB-INF/index.jsp,查询资料发现如果修改默认页面,还需要修改Tomcat文件目 ...

  5. 解决iframe作为子窗口，刷新后iframe页面跳转到其它页面的问题

    转载请在页首注明作者与出处 http://www.cnblogs.com/zhuxiaojie/p/5990262.html 前言: 在开发网站时,尤其是管理后台,我们经常会使用iframe作为内容窗 ...

  6. Android studio关于点击事件后的页面跳转，选择完成后返回（onActivityResult）

    我这个人喜欢直接上代码,在代码中说明更方便,更直接. 首先在.xml中设置一个button按钮,和一个EditText框,并分别做好id号. 这里我以籍贯测试对象. <LinearLayout ...

  7. 微信如何实现自动跳转到用其他浏览器打开指定页面下载APP

    不管是app的下载链接还是普通文件的链接在微信内置浏览器或者QQ内置浏览器都会被屏蔽.这是微信对第三方下载域名实施的拦截政策.被拦截了用户在微信内打开就会提示“已停止访问该网页”. 那么当我们遇到这个 ...

  8. Android Studio实现页面跳转（新页面或者网站）

    一,跳转到另一个页面 百度了好久,好像好多种方法,从中挑选了一中比较方便的一中方法 利用Intent类进行实现 1,首先在firstActivity中添加相应的跳转命令代码 例如一下示例代码 if ( ...

  9. 从A页面跳转到B页面，从B页面按浏览器自带按钮返回到A页面并且刷新页面--手机操作浏览器自带返回并自带刷新

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

随机推荐

  1. C#面向对象基本概念总结

    快过年了,发一篇自己的复习总结.以下内容均是个人理解,如文章有幸被浏览,如有错误的地方欢迎大家提出,相互学习相互进步! 面向对象三大基本特征:封装,继承,多态 一.类 (对象声明的三种方式:以普通基类 ...

  2. Linux 内核文档翻译 - kobject.txt

    原文地址:Linux 内核文档翻译 - kobject.txt 作者:qh997 Everything you never wanted to know about kobjects, ksets, ...

  3. P4180 严格次小生成树[BJWC2010] Kruskal，倍增

    题目链接\(Click\) \(Here\). 题意就是要求一个图的严格次小生成树.以前被题面吓到了没敢做,写了一下发现并不难. 既然要考虑次小我们就先考虑最小.可以感性理解到一定有一种次小生成树,可 ...

  4. CMakeList.txt（2）：CMakeLists.txt编写规则

    #project namePROJECT(test_math)    指定生成的工程名为test_math #head file path     INCLUDE_DIRECTORIES(includ ...

  5. linux 命令之文件读取，head, tail, tailf, sed

    head 看文件的前100行head -100  filename tail/tailf查看文件的后100行tail -100  filename 或 tail -n 100  filename ta ...

  6. 2. Java内存区域

    Java 虚拟机的内存模型分为两部分:一部分是线程共享的,包括 Java 堆和方法区:另一部分是线程私有的,包括虚拟机栈和本地方法栈,以及程序计数器这一小部分内存 2.1 程序计数器 程序计数器(Pr ...

  7. ArcGis Classic COM Add-Ins插件dll的安装与卸载

    本文是去年<ArcGis Classic COM Add-Ins插件开发的一般流程 C#>一文(以下称“开发流程”)的后续.“开发流程”中写到会有“安装与卸载”系列的文章,今天把它补上. ...

  8. [Luogu P2966][BZOJ 1774][USACO09DEC]牛收费路径Cow Toll Paths

    原题全英文的,粘贴个翻译题面,经过一定的修改. 跟所有人一样,农夫约翰以宁教我负天下牛,休叫天下牛负我的伟大精神,日日夜夜苦思生财之道.为了发财,他设置了一系列的规章制度,使得任何一只奶牛在农场中的道 ...

  9. [算法竞赛入门经典]Message Decoding,ACM/ICPC World Finals 1991,UVa213

    Description Some message encoding schemes require that an encoded message be sent in two parts. The ...

  10. 【转】关于Tomcat下项目线程启动两次的问题

    最近遇见了一个很搞得事情,在tomcat下启动项目时自己写的定时程序被执行了两次,导致程序启动了两个线程,使定时任务在几秒间隔内执行了两次,后来通过日志查到,原来是tomcat将项目启动了两次,为什么 ...