https://tanida.org.tw/js/jquery.tab.js

1/*
2    本外掛由黯雲（AnYun）撰寫，歡迎修改，
3    但是記得到我網誌分享修改結果喔！
4
5    教學網址：http://coding.anyun.idv.tw/2012/03/03/jquery-tab/
6	
7    版本：1.0.0
8*/
9(function ($) {
10
11    $.fn.tab = function (options) {
12
13        var settings = $.extend({
14            'tabbtn': '.TabBtn li a',   // Tab 按鈕
15            'tabcontent': '.TabText>div',  // 內文區塊
16            'activecss': 'active',  // 點選中的樣式
17            'event': 'click'    // 事件。可以改成 mouseenter ，就是滑鼠移過去的事件
18        }, options);
19
20        return this.each(function () {
21            $this = $(this);
22            $tabbtn = $this.find(settings.tabbtn);
23            $tabcontent = $this.find(settings.tabcontent);
24            $activecss = settings.activecss;
25            $event = settings.event;
26
27            $tabcontent.hide().eq(0).show();    // 顯示第一則內文
28            $tabbtn.eq(0).parent().attr('class', $activecss);   // 設定第一個 Tab 按鈕樣式
29
30            // 設定 Tab 按鈕事件
31            $tabbtn.bind($event, function (i) {
32                var i = $tabbtn.index(this);
33                $tabcontent.hide().eq(i).show();    // 顯示點選的內容
34                $tabbtn.parent().removeClass().eq(i).attr('class', $activecss);     // 設定點選的頁籤內容
35            });
36
37        });
38    };
39})(jQuery);