Bootstrap JavaScript 插件大全

TAB Js选项卡

第一种：声明式方法

原理：TAB选项卡有二部分组成：按钮、内容

第一步：做出选项卡按钮

<ul class="nav nav-tabs">
<li><a href="#">历史</a></li>
<li><a href="#">历史</a></li>
<li><a href="#">历史</a></li>
</ul>

第二步：制作主体内容

<div class="tab-content">
<div class="tab-pane">历史历史历史历史历史历史历史历史历史历史历史历史历史历史历史历史历史历史历史历史历史历史历史历史</div>
<div class="tab-pane">语文语文语文语文语文语文语文语文语文语文语文语文语文语文语文语文语文语文语文语文语文语文</div>
<div class="tab-pane">数学数学数学数学数学数学数学数学数学数学数学数学数学数学数学数学数学数学数学</div>
</div>

第三步：给主体内容每一项添加一个ID，并且给第一项添加显示内容类 active

<div class="tab-content">
<div class="tab-pane active" id="pane1">历史历史历史历史历史历史历史历史历史历史历史历史历史历史历史历史历史历史历史历史历史历史历史历史</div>
<div class="tab-pane" id="pane2">语文语文语文语文语文语文语文语文语文语文语文语文语文语文语文语文语文语文语文语文语文语文</div>
<div class="tab-pane" id="pane3">数学数学数学数学数学数学数学数学数学数学数学数学数学数学数学数学数学数学数学</div>
</div>

第四步：选项卡按钮添加各自内容的链接地址，产生关联。

<ul class="nav nav-tabs">
<li><a href="#pane1">历史</a></li>
<li><a href="#pane2">语文</a></li>
<li><a href="#pane3">数学</a></li>
</ul>

第五步：给选项卡按钮添加点击隐藏的类

<ul class="nav nav-tabs">
<li><a href="#pane1" data-toggle="tab">历史</a></li>
<li><a href="#pane2" data-toggle="tab">语文</a></li>
<li><a href="#pane3" data-toggle="tab">数学</a></li>
</ul>

通过以上五步，即可制作出一个tab选项卡。全部代码如下：

第二种：JS方法

JS方法与声明式方法的区别在于：

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

代替

data-toggle="tab"

并且这段代码必须放在

<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>

后面才能起效果。

全部代码如下：

<script language="javascript">

$(function(){



$('#navv a').click(function (e) {//给#navv a标签添加click行为

e.preventDefault();//通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作)

$(this).tab('show');//点击哪个，显示哪个

});

})

</script>



<ul class="nav nav-tabs" id="navv">

<li><a href="#pane1">历史</a></li>

<li><a href="#pane2">语文</a></li>

<li><a href="#pane3">数学</a></li>

</ul>

<div class="tab-content">

<div class="tab-pane active" id="pane1">历史历史历史历史历史历史历史历史历史历史历史历史历史历史历史历史历史历史历史历史历史历史历史历史</div>

<div class="tab-pane" id="pane2">语文语文语文语文语文语文语文语文语文语文语文语文语文语文语文语文语文语文语文语文语文语文</div>

<div class="tab-pane" id="pane3">数学数学数学数学数学数学数学数学数学数学数学数学数学数学数学数学数学数学数学</div>

</div>

 $(function(){(……)}：当页面加载完后加载

事件：

<script language="JavaScript">
$(function(){

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
e.target // 显示当前内容
e.relatedTarget // 显示上一次显示的内容
})
});

</script>

工具提示：

这种特效有二部分组成 ：

第一步：给HTML中添加属性。（data-placement="left" 是显示的方向）

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

第二步：在</head>标签上方添加js代码

$(function () {
$('[data-toggle="tooltip"]').tooltip()
})