【点击链接进入另一个页面的特定选项卡】
为解决这个问题我要做的就是获取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比较,相同的选项卡显示。
第一次写,不清楚怎样才能阐述清楚。有问题请指正。