Tab HTML和JQuery实现｜青训营笔记这是我参与「第五届青训营」笔记创作活动的第4天前言在完成大作业的过程

这是我参与「第五届青训营」笔记创作活动的第4天

前言

在完成大作业的过程中，我被分配到了这个任务，封装Tabs组件我这里先从最底层做起，先用 Html + JQuery 实现了一遍，然后根据已经实现的去进行拆分。

准备工作-配置并引入JQuery

为什么使用JQuery

Query这么流行，肯定是因为它解决了一些很重要的问题。实际上，jQuery能帮我们干这些事情：

消除浏览器差异：你不需要自己写冗长的代码来针对不同的浏览器来绑定事件，编写AJAX等代码；
简洁的操作DOM的方法：写$('#test')肯定比document.getElementById('test')来得简洁；
轻松实现动画、修改CSS等各种操作。

jQuery的理念“Write Less, Do More“，让你写更少的代码，完成更多的工作

JQuery版本相关问题

目前jQuery有1.x和2.x两个主要版本，区别在于2.x移除了对古老的IE 6、7、8的支持，因此2.x的代码更精简。选择哪个版本主要取决于你是否想支持IE 6~8。

从jQuery官网可以下载最新版本。jQuery只是一个jquery-xxx.js文件，但你会看到有compressed（已压缩）和uncompressed（未压缩）两种版本，使用时完全一样，但如果你想深入研究jQuery源码，那就用uncompressed版本。

使用jQuery

使用jQuery只需要在页面的<head>引入jQuery文件即可：

<html>
<head>
    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
	...
</head>
<body>
    ...
</body>
</html>

HTML部分

头部 Tab 使用 ul 和 li 标签去实现，并且里面使用 a 标签去包裹着标题，方便之后事件操作使用。

<div class="tab-header">
    <ul class="tab-item">
        <li class="tab-item-title active">
            <a href="#">Tab1</a>
        </li>
        <li class="tab-item-title">
            <a href="#">Tab2</a>
        </li>
        <li class="tab-item-title">
            <a href="#">Tab3</a>
        </li>
        <div class="clear"></div>
    </ul>
</div>
<div class="tab-panel">
    <div class="tab-panel-content active">
        <h1>我的第一个标题</h1>

        <p>我的第一个段落。</p>
    </div>
    <div class="tab-panel-content">
        <h1>我的第二个标题</h1>

        <p>我的第二个段落。</p>
    </div>
    <div class="tab-panel-content">
        <h1>我的第三个标题</h1>

        <p>我的第三个段落。</p>
    </div>
</div>

js部分

(function () {

var Tab = function () {
    this._$tabItem = $('.tab-item').find('.tab-item-title');
    this._$tabPanel = $('.tab-panel').find('.tab-panel-content');
    this._selectIndex = 0;
    return this.init();
}
Tab.prototype = {
    changeTab: function (index) {
        this._$tabItem.removeClass('active');
        this._$tabPanel.removeClass('active')
        this._$tabItem.eq(index).addClass('active');
        this._$tabPanel.eq(index).addClass('active')
    },
    selectedIndex() {
        return this._selectIndex;
    },
    init: function () {
        var _this = this;
        this._$tabItem.click(function () {
            _this.changeTab($(this).index());
            _this._selectIndex = $(this).index();
        });
        return _this;
    }
}
var tab = new Tab();

})()

Tab HTML和JQuery实现｜ 青训营笔记

前言