a标签跳转到另一个页面的特定选项卡

最新推荐文章于 2020-12-15 10:58:14 发布

加油王大可

最新推荐文章于 2020-12-15 10:58:14 发布

阅读量4.8k

点赞数 1

分类专栏：前端起步文章标签： html 标签跳转

本文链接：https://blog.csdn.net/wq_8183_zq/article/details/52914995

版权

前端起步专栏收录该内容

1 篇文章 0 订阅

订阅专栏

【点击链接进入另一个页面的特定选项卡】

为解决这个问题我要做的就是获取URL的hash值，通过这个hash值来决定显示选项卡的哪个选项。

首先，就是要了解JavaScript的location对象（w3cschool有详细介绍）。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<a href="./tab.html#home">选项一</a>
	<br>
	<a href="./tab.html#profile">选项二</a>
	<br>
	<a href="./tab.html#messages">选项三</a>
	<br>
	<a href="./tab.html#settings">选项四</a>
</body>
</html>

上面是页面跳转链接，可以看到herf属性里面跟了hash值。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">

<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
		<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
  <li role="presentation" class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
  <li role="presentation" name="profile2"><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
  <li role="presentation"><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
  <li role="presentation"><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div role="tabpanel" class="tab-pane active" id="home">.1</div>
  <div role="tabpanel" class="tab-pane" id="profile">..2</div>
  <div role="tabpanel" class="tab-pane" id="messages">.3.</div>
  <div role="tabpanel" class="tab-pane" id="settings">.4.</div>
</div>
<script type="text/javascript">
	var hash = location.hash;//获取到跳转页面的参数
	var tab = $('.nav-tabs li');
	var con = $('.tab-content .tab-pane');
	console.log(con);
	for(var i=0;i<con.length;i++){
		var mm = con[i];
		var selectCon = "#"+ $(mm).attr('id');
		if(hash == selectCon){
			tab.siblings().removeClass('active');
			con.siblings().removeClass('active');
			$(tab[i]).addClass('active');
			$(con[i]).addClass('active');
		}
	}
	
</script>	
</body>
</html>

点击链接跳转过来的页面。

获取到hash值然后和tab的ID比较，相同的选项卡显示。

第一次写，不清楚怎样才能阐述清楚。有问题请指正。

加油王大可

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
2
评论
a标签跳转到另一个页面的特定选项卡

【点击链接进入另一个页面的特定选项卡】为解决这个问题我要做的就是获取URL的hash值，通过这个hash值来决定显示选项卡的哪个选项。首先，就是要了解JavaScript的location对象（w3cschool有详细介绍）。 Document 选项一选项二选项三选项四上面是页面跳转链接，可以看到herf属性里面跟了ha
复制链接

扫一扫