bootstrap 实现标签页切换监听事件和切换选项卡

<ul class="nav nav-pills" role="tablist">

		<li role="presentation" class="active">

			<a href="#tab1" aria-controls="tab1" role="tab" data-toggle="tab">test1</a>

		</li>

		<li role="presentation">

			<a href="#tab2" aria-controls="tab2" role="tab" data-toggle="tab">test2</a>

		</li>

		<li role="presentation">

			<a href="#tab3" aria-controls="tab3" role="tab" data-toggle="tab">test3</a>

		</li>

	</ul>

<div class="tab-content">

	<div role="tabpanel" class="tab-pane active" id="tab1">

    </div>

    <div role="tabpanel" class="tab-pane" id="tab2">

    </div>

    <div role="tabpanel" class="tab-pane" id="tab3">

    </div>

</div>

点击标签页的监听事件

$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {

		switch (( e.target.toString().split("#")[1])){

			case 'tab1':

			//TODO 这里写你要执行的代码

				break;

			case 'tab2':

			//TODO

				break;

			case 'tab3':

			//TODO

				break;

			default:

				break;

		}

})

动态变换标签页

//当前激活tab3标签
$('.nav-pills a[href="#tab3"]').tab("show");