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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/wq_8183_zq/article/details/52914995

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

 为解决这个问题我要做的就是获取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比较,相同的选项卡显示。





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



展开阅读全文

没有更多推荐了,返回首页