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

$().tab() bootStrap中Tab页签切换

2017-12-19 17:25 316 查看
<style type="text/css">
.tab-pane{
display: none;
}
.active{
display: block;
}
</style>
<ul class="nav nav-tabs" id="myTab"><li class="active"><a href="#home">Home</a></li><li><a href="#profile">Profile</a></li><li><a href="#messages">Messages</a></li><li><a href="#settings">Settings</a></li></ul><div class="tab-content"><div class="tab-pane active" id="home">111</div><div class="tab-pane" id="profile">222</div><div class="tab-pane" id="messages">.33</div><div class="tab-pane" id="settings">.44</div></div>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script><script type="text/javascript" src="js/bootstrap.min.js"></script><script>$(function () {$('#myTab a:last').tab('show');//初始化显示哪个tab$('#myTab a').click(function (e) {e.preventDefault();//阻止a链接的跳转行为$(this).tab('show');//显示当前选中的链接及关联的content})})</script>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: