Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

实现一个Tab控件 #3

Open
errorrik opened this issue Dec 11, 2014 · 0 comments
Open

实现一个Tab控件 #3

errorrik opened this issue Dec 11, 2014 · 0 comments

Comments

@errorrik
Copy link

实现一个Tab控件，功能要求如下：

  1. 通过new Tab，创建Tab控件的实例。
  2. 允许传入一个options参数，其中，main代表tab控件主元素，activeIndex代表tab的当前活动页面
  3. 主元素下的li代表对应的一个tab项，data-tab-item属性可以指定其关联面板元素的id
  4. 初始化后，只有当前活动页面的panel为显示，其他panel为隐藏。当前活动页面的li应高亮显示（具体样式可以自己设计）
  5. 点击tab的li，其关联面板元素变为显示，其他li的关联面板元素变为隐藏
  6. 允许通过Tab控件实例的setActiveIndex方法，设置当前活动页面。行为同5

这里有个类似的功能示例

其他额外要求：

  1. 作业实现分成3个文件index.html、index.css、Tab.js
  2. 这3个文件使用github维护，放在 http://github.com/jhuangpku/homework 这个repos下（其他的也行，你看着办好了），建立一个叫tab的目录
  3. 在开发者工具的控制台中，输入myTab.setActiveIndex(2)，panel3应显示，panel1和panel2应隐藏

参考index.html

<DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="index.css" />
</head>

<body>
    <ol id="myTab">
        <li data-tab-item="panel1">one</li>
        <li data-tab-item="panel2">two</li>
        <li data-tab-item="panel3">three</li>
    </ol>
    <div id="panel1">Panel 1</div>
    <div id="panel2">Panel 2</div>
    <div id="panel3">Panel 3</div>

    <script src="Tab.js"></script>
    <script>
    var myTab = new Tab({
        main: document.getElementById('myTab'),
        activeIndex: 1
    });
    </script>
</body>
</html>

参考Tab.js

function Tab(options) {
    // 实现构造函数
}

Tab.prototype.setActiveIndex = function (activeIndex) {
    // 实现setActiveIndex方法
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@errorrik