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>
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019.02.27 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录