最近事情比較多，小婷已經(jīng)沒有足夠的時間去學(xué)習(xí)新的知識點，就寫一寫簡單的東西吧，這些還是從前學(xué)習(xí)前端的時候留下的課堂的筆記，那個時候喜歡記筆記，覺得總是有用的上的地方，畢竟好記性不如爛筆頭。
思路：
從頁面 a 通過 url ？ 后面的參數(shù)給頁面b 傳一個 index，頁面b通過這個參數(shù)來控制該選項卡的切換
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 = 后面的數(shù)字 （id）
3：使用傳過來的 數(shù)字 （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(); //下標(biāo)第一種寫法
//var i = $('tit').index(this);//下標(biāo)第二種寫法
$(this).addClass('select').siblings().removeClass('select');
$('#con li').eq(i).show().siblings().hide();
});
// 獲取 被訪問時的 url
var ur = location.href;
// 獲取該url = 后面的數(shù)字 （id）
var type = ur.split('?')[1].split("=")[1];
// 使用傳過來的 數(shù)字 （id） 來控制該選項卡的切換
// 其實就是從頁面 A 通過 URL ？ 后面的參數(shù) 給頁面B 傳一個 index
$('#tit span').eq(type - 1).addClass('select').siblings().removeClass('select');
$('#con li').eq(type - 1).show().siblings().hide();
</script>
</body>
</html>
原文作者：祈澈姑娘 技術(shù)博客：http://www.itdecent.cn/u/05f416aefbe1
90后前端妹子，愛編程，愛運營，文藝與代碼齊飛，魅力與智慧共存的程序媛一枚。
堅持總結(jié)工作中遇到的技術(shù)問題，堅持記錄工作中所所思所見，對于博客上面有不會的問題，可以加入qq技術(shù)交流群聊：649040560。
