这篇是用来记录怎样为应用了bootstrap样式、组件的元素引用标签页插件,其实无论使用bootstrap中哪一个插件都有两种方式:
一种是直接使用data-*扩展属性,这是 Bootstrap 中的一等 API,也应该是首选方式。
另一种是使用编程方式的 API,即用写js的方式来调用插件函数实现效果,一般情况不建议使用这种方式。
应用了组件还没有应用标签页插件时的写法和效果:
<ul class="nav nav-tabs">
<li class="active"><a href="#">Index</a></li>
<li><a href="#">contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">products <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">first</a></li>
<li><a href="#">second</a></li>
<li><a href="#">third</a></li>
</ul>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id="index">
IndexindexindexindexindexindexindexindexindexindexindexindexindexIndexindexindexindexindexindexindexindexi ndexindexindexindexindexIndexindexindexindexindexindexindexindexindexindexindexindexindexIndexinde xindexindexindexindexindexindexindexindexindexindexindexIndexindexindexindexindexindexindexindexindexindexindexindexindexIndexindexindexindexindexin dexindexindexindexindexindexindexindexIndexindexindexindexindexindexindexindexindexindexindex
</div>
<div class="tab-pane fade" id="contact">contactcontactcontactcontact</div>
<div class="tab-pane fade" id="first">firstfirstfirstfirstfirst</div>
<div class="tab-pane fade" id="second">secondsecondsecondsecond</div>
<div class="tab-pane fade" id="third">thirdthirdthirdthirdthirdthird</div>
</div>
效果:
改变成另一种标签样式,只需将.nav-tabs换成.nav-pills,也可以将标签扩展到100%宽度,再加一个.nav-justified属性就可以。
因为还没有使用插件,所以现在只是一个展示效果,并不可以点击切换标签页。
注意:.tab-pane中的内容和标签是对应的,每个.tab-pane都应该写上id属性,方便插件定位保证点击标签改变显示内容时显示正确。
现在可以使用插件了,扩展属性的方式使用插件是非常简单的,只需要两步:
1、在每个li标签页的a标签上加data-toggle=”tab”
2、将每个li标签页的a标签的href属性锚点指向对应内容id,即:
<li class="active"><a href="#index" data-toggle="tab">Index</a></li>
完整代码为:
<ul class="nav nav-tabs">
<li class="active"><a href="#index" data-toggle="tab">Index</a></li>
<li><a href="#contact" data-toggle="tab">contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">products <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#first" data-toggle="tab">first</a></li>
<li><a href="#second" data-toggle="tab">second</a></li>
<li><a href="#third" data-toggle="tab">third</a></li>
</ul>
</li>
</ul>
<div class="tab-content">
...(同上)
</div>
这样就可以点击切换标签页了: