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