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

Bootstrap中tab标签切换demo

2015-10-22 21:18 591 查看
<span style="font-size:18px;"><ul class="nav nav-tabs" id="otherInfoTab">
<li class="active"><a href="#time_line">时间轴</a></li>
<li><a href="#complain">投诉</a></li>
<li><a href="#sms_send">短信回评</a></li>
<li><a href="#order_path">订单轨迹</a></li>
</ul>

<div class="tab-content">
<div class="tab-pane active" id="time_line">111</div>
<div class="tab-pane" id="complain">222</div>
<div class="tab-pane" id="sms_send">333</div>
<div class="tab-pane" id="order_path">444</div>
</div>

<script>
$(function() {
$('#otherInfoTab a:last').tab('show');//初始化显示哪个tab

$('#otherInfoTab a').click(function(e) {
e.preventDefault();//阻止a链接的跳转行为
$(this).tab('show');//显示当前选中的链接及关联的content
})
})
</script></span>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  js bootstrap tab jquery 前端