首页 > 代码库 > bootstrap中 刷新页面，tab页选中不改变。
bootstrap中 刷新页面，tab页选中不改变。
直接拷贝本人代码即可 注意在同级目录下引用 相应的js 和 css。
能实现tab效果 关键看bootstrap的 data-toggle= tab
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href=http://www.mamicode.com/"bootstrap.min.css">
<script src=http://www.mamicode.com/"jquery-1.11.1.min.js"></script>
<script src=http://www.mamicode.com/"bootstrap.min.js"></script>
<script>
$(document).ready(function() {
if(location.hash) {
$(‘a[href=http://www.mamicode.com/‘ + location.hash + ‘]‘).tab(‘show‘);
}
$(document.body).on("click", "a[data-toggle]", function(event) {
location.hash = this.getAttribute("href");
});
});
$(window).on(‘popstate‘, function() {
var anchor = location.hash || $("a[data-toggle=tab]").first().attr("href");
$(‘a[href=http://www.mamicode.com/‘ + anchor + ‘]‘).tab(‘show‘);
});
</script>
</head>
<body>
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a data-toggle="tab" href=http://www.mamicode.com/"#home">Home
<li><a data-toggle="tab" href=http://www.mamicode.com/"#profile">Profile
<li><a data-toggle="tab" href=http://www.mamicode.com/"#messages">Messages
<li><a data-toggle="tab" href=http://www.mamicode.com/"#settings">Settings
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">home</div>
<div class="tab-pane" id="profile">profile</div>
<div class="tab-pane" id="messages">messages</div>
<div class="tab-pane" id="settings">settings</div>
</div>
</body>
</html>
bootstrap中 刷新页面，tab页选中不改变。