jQuery Bootstrap实现个性化Tab选项卡菜单插件

一款jQuery Bootstrap实现的个性化Tab选项卡菜单插件，点击不同的选项标题可切换显示不同的选项内容，而且每个选项内容的高度都是自适应的，整体的色彩搭配还是不错的哦，喜欢的童鞋请收下吧。

分类：选项卡/滑动门 > 列表切换难易：初级

查看演示下载资源下载积分： 20 积分

页面的head部分，先引入bootstrap.min.css样式文件，并设置好页面各元素的样式，代码如下：

接着引入jQuery库和bootstrap.min.js，代码如下：

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>

页面的body部分，结构还不算复杂，选项标题放入不同的li标签里，选项内容则放入不同的div容器里，代码如下：

<div class="demo">
	<div class="container">
		<div class="row">
			<div class="col-md-offset-3 col-md-6">
				<div class="tab" role="tabpanel">
					<!-- Nav tabs -->
					<ul class="nav nav-tabs" role="tablist">
						<li role="presentation" class="active"><a href="#Section1" aria-controls="home" role="tab" data-toggle="tab">要求</a></li>
						<li role="presentation"><a href="#Section2" aria-controls="profile" role="tab" data-toggle="tab">信念</a></li>
						<li role="presentation"><a href="#Section3" aria-controls="messages" role="tab" data-toggle="tab">接受</a></li>
					</ul>
					<!-- Tab panes -->
					<div class="tab-content tabs">
						<div role="tabpanel" class="tab-pane fade in active" id="Section1">
							<h3>要求</h3>
							<p>第一个阶段，是做出要求，对宇宙发出指令，让宇宙了解你想要些什么，宇宙就会自动回应你的想法。</p>
							<p>这是一个很有意思的过程，就好比把宇宙当成一本货物的目录，你翻着它，然后决定“我要经历这个，我要那种东西，我要跟那种人一起生活”，你就是那个跟宇宙下订单的人。其实就是这样简单。</p>
						</div>
						<div role="tabpanel" class="tab-pane fade" id="Section2">
							<h3>信念</h3>
							<p>第二步是信念。你要相信你已经拥有它了。要有一种毫不动摇的信念，就是我的说法，要相信还没有实现的事，“你的愿望就是我的命令”，宇宙就会开始运作安排，从而满足你心中的愿望。</p>
							<p>大多数的时候，假如我们要求的事物没有出现在生活中，我们会感到沮丧和失望，我们甚至会开始怀疑，这种怀疑会让人感到心灰意冷。接受这个感觉，然后用坚定的信念代替它：“我知道……我知道……我知道……，它就要实现了。”</p>
						</div>
						<div role="tabpanel" class="tab-pane fade" id="Section3">
							<h3>接受</h3>
							<p>第三步，就是这个过程最后一步，接受。开始感觉好极了，想想要是你想要的事物已经出现，那会是什么感觉。</p>
							<p>当你感觉好的时候，你就是把自己和你要的事物放在同一个频率上。尝试去做一切你能做的事，帮助自己具有拥有它们的感觉。无论你能做什么，只要去做，就有助于把这些东西吸引过来。</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>