代码改变世界

tab组建

2015-04-08 14:59  厘澄  阅读(144)  评论(0)    收藏  举报 
 1 $(function () {
 2         jQuery.fn.tabs = function (control) {
 3             var $element = $(this),
 4                 $control = control;
 5             
 6             $element.on('click','[data-tab]',function () {
 7                 var tabName = $(this).attr('data-tab');
 8                 $element.trigger('change.tabs',tabName);
 9             });
10             
11             $element.on('change.tabs',function (e,tabName) {
12                 $element.find('[data-tab]').removeClass('active');
13                 $element.find('[data-tab="'+tabName+'"]').addClass('active');
14                 window.location.hash = tabName;
15             });
16             
17             $element.on('change.tabs',function (e,tabName) {
18                 $control.find('[data-tab]').removeClass('active');
19                 $control.find('[data-tab="'+tabName+'"]').addClass('active');
20             });
21             
22             $(window).bind('hashchange',function () {
23                 var tabName = window.location.hash.slice(1);
24                 $element.trigger('change.tabs',tabName);
25             });
26             
27             var firstName = $element.find('[data-tab]').eq(0).attr('data-tab');
28             $element.trigger('change.tabs',firstName);
29             
30             return this;
31         };
32         
33         $('#tabs').tabs($('#content'));
34     });