https://github.com/dvshu/tersetabs

标签选项卡
https://github.com/dvshu/tersetabs

Last synced: 2 months ago
JSON representation

标签选项卡

• Host: GitHub
• URL: https://github.com/dvshu/tersetabs
• Owner: DvShu
• Created: 2016-03-30T06:19:16.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2016-06-14T07:30:41.000Z (almost 9 years ago)
• Last Synced: 2025-01-21T12:30:38.682Z (4 months ago)
• Language: HTML
• Size: 15.6 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# TerseTabs

---

在前端页面开发的时候，经常会用到选项卡的实现，特别是在做移动页面开发的时候，选项卡是最常用的方式了。


这里我用了两种方式来实现，第一种是通过js控制，第二种是通过css来控制；现在我对通过js控制做了一个简单的封装，而通过css控制的没有做封装，因为这种方式适合在比较简单的选项卡上，需要通过<lable>的for属性来实现。

![](https://github.com/ReconcileMySelf/TerseTabs/raw/master/images/screen1.png)

![](https://github.com/ReconcileMySelf/TerseTabs/raw/master/images/screen2.png)

---

使用也比较简单。


1.标签布局

``` HTML

  

        


            
语文

            
数学

            
英语

        

```

2.调用封装的方法：

```javascript

$("#tabs1").terseTabs({

                "defaultIndex": -1, // 初始没有选中项

                /* 切换样式,每一种样式之间用空格分隔,第一种样式为为选中时(默认)的样式,第二种样式为选中时的样式 */

                "toggleClass" : "terse_tab_item_normal terse_tab_item_selected",

                // 选项卡切换事件

                "onChange" : function (i) {

                    var content = "";

                    if(i == 0){

                        content = "这是语文课";

                    }else if(i == 1){

                        content = "这是数学课";

                    }else if(i == 2){

                        content = "这是英语课";

                    }

                    $("#content").html(content);

                }

            });

```

`注意：封装是基于jquery来的，所以在使用之前应该先引用jquery。`