最近事情比较多, 小婷已经没有足够的时间去学习新的知识点, 就写一写简单的东西吧, 这些还是从前学习前端的时候留下的课堂的笔记, 那个时候喜欢记笔记, 觉得总是有用的上的地方, 毕竟好记性不如烂笔头.
思路:
从页面 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 页面:
: 获取 被访问时的 url
: 获取该 url = 后面的数字 (id)
: 使用传过来的 数字 (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>
来源: http://www.jianshu.com/p/4ff3a7d40c9e