![Bootstrap 4 Web设计与开发实战](https://wfqqreader-1252317822.image.myqcloud.com/cover/160/36862160/b_36862160.jpg)
上QQ阅读APP看书,第一时间看更新
2.4 调用Bootstrap JS特效
对于Bootstrap中JavaScript效果的添加,一方面需要根据文档编写特定的HTML结构,另一方面需要调用JavaScript插件。下面以标签页切换效果为例来讲解。
【代码2-5】(详见源代码ch02目录中ch02.loadTabs.html文件)
(1)编写HTML文档:
![](https://epubservercos.yuewen.com/482A23/19549639808909106/epubprivate/OEBPS/Images/Figure-P30_20165.jpg?sign=1739281229-khAyXcPI4Bh4iOD6kCgVEl6bAMHD4dwl-0-e139aa10ded80db27fbb0ce7cf603879)
(2)JavaScript插件的调用一般有两种方式。一种是采用Bootstrap自带的触发规则,在标签中添加data-toggle="tab"这样的属性来实现(上述代码第2行),这种方式的好处是无须编写任何JavaScript代码就可以实现功能。另一种是类似普通jQuery插件的调用方式,例如:
$('#myTab a').click(function (e) { e.preventDefault(); $(this).tab('show'); })
本例最终实现的效果如图2.10所示,单击标签就可以切换内容。
![](https://epubservercos.yuewen.com/482A23/19549639808909106/epubprivate/OEBPS/Images/Figure-P31_12220.jpg?sign=1739281229-cYBckuciLxGcQFhkmoGAEQdPG55tPimS-0-cec1d2ea9cc4738a4866e5a4209c7f37)
图2.10 标签页效果