您的位置：首页 > Web前端 > BootStrap

bootstrap在 刷新页面，tab选择页面不会改变。

2015-12-11 13:52 477 查看
您可以直接复制代码 注意在同级别文件夹中引用 相应js 和 css。

实现tab影响 关键看bootstrap的 data-toggle= tab

<html lang="en">

<head>

<meta charset="UTF-8">

<link rel="stylesheet" href="bootstrap.min.css">

<script src="jquery-1.11.1.min.js"></script>

<script src="bootstrap.min.js"></script>

<script>

$(document).ready(function() {

if(location.hash) {

$('a[href=' + 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=' + anchor + ']').tab('show');

});

</script>

</head>

<body>

<ul class="nav nav-tabs" id="myTab">

<li class="active"><a data-toggle="tab" href="#home">Home</a></li>

<li><a data-toggle="tab" href="#profile">Profile</a></li>

<li><a data-toggle="tab" href="#messages">Messages</a></li>

<li><a data-toggle="tab" href="#settings">Settings</a></li>

</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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航