零基础建站培训介绍

当前位置:

Bootstrap JavaScript 插件大全

TAB Js选项卡

tab

 

第一种:声明式方法

原理: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选项卡。全部代码如下:

<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>
<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>

第二种: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>


 

工具提示:

gj

这种特效有二部分组成 :

第一步:给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()
})

上一课: 下一课:

发表评论

邮箱地址不会被公开。 必填项已用*标注

相关教程

  • WP-AutoPost是目前特别好用的WordPress自动采集发布插件,最大的特点是可以采集来自于任意网站的内容并自动发布到你的WordPress站点。不像其他大
  • TAB Js选项卡 第一种:声明式方法原理:TAB选项卡有二部分组成:按钮、内容第一步:做出选项卡按钮<ul class="nav n
  • 对于网站前端开发工程师来说,在前端设计中,经常会使用到jQuery特效,对于一些常用的jQuery特效,我们可以制作成插件使用。下面是网站前端设计常用的
  • 我们使用Discuz做网站时,有时需要在官方应用中心之外下载一个模板或者插件。(相关教程:discuz视频教程)这里我们安装时,就会提示“对不起,您安装
  • 问题:我想通过FTP软件安装dz论坛插件,请问一下dz论坛插件安装目录是什么?是哪个文件夹?回复:dz论坛插件安装目录是/source/plugin/。
  • html元素标签属性大全 (115069 次浏览)
    什么是HTML属性每个HTML元素都可以给它添加一些属性,让它成为我们做网站时需要的样子。例如一段文字,我们可以给它添加属性,使这段文字变成红色,
  • 新手必知HTML标签大全 (13819 次浏览)
    以下是新手学习建网站,必须学习了解的HTML标签。(相关教程:HTML入门教程)body的属性: bgcolor                页面背景色 backgroun
  • Z-Blog是由RainbowSoft Studio开发的一款小巧而强大的基于Asp平台的Blog程序。采用模板标签的方式,只要你会HTML+CSS,就可以简单地做出一套主题。如
  • 在HTML中除了一些常用的HTML标签之外,还有一些HTML特殊字符,使用过程中不能直接拼写出来,必须使用特殊字符代码才能显示出来。例如®、©、∑等等。
  • Bootstrap组件大全 图文教程 (16428 次浏览)
    什么是Bootstrap组件:无数可复用的组件,包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能。Glyphicons 字体图标使用方法