2.4 调用Bootstrap JS特效_Bootstrap Web设计与开发实战-QQ阅读男生轻小说网

书名：Bootstrap Web设计与开发实战
作者名：杨旺功
本章字数：260字
更新时间：2020-11-28 16:39:10

2.4 调用Bootstrap JS特效

对于Bootstrap中JavaScript效果的添加，一方面需要根据文档编写特定的HTML结构，另一方面需要调用JavaScript插件。下面以标签页切换效果为例来讲解。

【代码2-5】（详见源代码ch02目录中ch02.loadTabs.html文件）

（1）首先编写HTML文档：

        01  <ul class="nav nav-tabs" id="myTab">
        02       <li class="active"><a href="#home" data-
    toggle="tab">Home</a></li>
        03       <li><a href="#news" data-toggle="tab">News</a></li>
        04       <li><a href="#blog" data-toggle="tab">Blog</a></li>
        05       <li><a href="#about" data-toggle="tab">About</a></li>
        06  </ul>
        07  <! -- href属性的值要和后面tab-pane中的id值对应 -->
        08  <div class="tab-content">
        09       <div class="tab-pane active" id="home">Home Page</div><! --tab
    标签对应的内容-->
        10       <div class="tab-pane" id="news">News Page</div>
        11       <div class="tab-pane" id="blog">Blog Page</div>
        12       <div class="tab-pane" id="about">About Page</div>
        13  </div>

（2）JavaScript插件的调用一般有两种方式，一种是采用Bootstrap自带的触发规则，在标签中添加data-toggle="tab"这样的属性来实现（上述代码第2行），这种方式的好处是无须编写任何JavaScript代码就可以实现功能；另一种则类似普通jQuery插件的调用方式，例如：

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

本例最终实现的效果如图2.10，点击标签页就可以切换内容。

图2.10 标签页效果