码迷,mamicode.com
首页 > Web开发 > 详细

解决Twitter Bootstrap Tab URL链接问题

时间:2015-02-22 15:45:00      阅读:177      评论:0      收藏:0      [点我收藏+]

标签:

例如这样的一个Tabs 代码:

<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="#settings">Settings</a></li>
</ul> 

解决方法

在Tabs 页面加入如下的脚本即可通过#tag 描点链接到某个具体的Tab 页面:

$(function(){
// Javascript to enable link to tab
var url = document.location.toString();
if (url.match(‘#‘)) {
    $(‘#myTab a[href=#‘+url.split(‘#‘)[1]+‘]‘).tab(‘show‘) ;
}
// Change hash for page-reload
$(‘#myTab a‘).on(‘shown‘, function (e) {
    window.location.hash = e.target.hash;
}); 
})

Twitter Bootstrap Tab 基本使用方法

通过JavaScript启用标签(每个选项卡需要激活单独):

$(‘#myTab a‘).click(function (e) {
  e.preventDefault();
  $(this).tab(‘show‘);
}); 

你可以激活标签通过以下几个方式:

(‘#myTab a[href="#profile"]‘).tab(‘show‘); // Select tab by name
$(‘#myTab a:first‘).tab(‘show‘); // Select first tab
$(‘#myTab a:last‘).tab(‘show‘); // Select last tab
$(‘#myTab li:eq(2) a‘).tab(‘show‘); // Select third tab (0-indexed) 

 

解决Twitter Bootstrap Tab URL链接问题

标签:

原文地址:http://www.cnblogs.com/wawahaha/p/4297487.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!