https://www.stadthalle.com/_assets/js/tab-jq.js?version=2026-09-24_15:30:58

1/* tabVisible 
2* @author: mario corradini // [email protected]
3* @version: 0.1 2014-01-14
4* @depencies: jquery
5* aria example: http://www.oaa-accessibility.org/example/15/
6* @usage:
7
8$("#clicklist").tabVisible({ 
9	selection: 'a.click', 
10	tablist: 'ul.tablist',
11	containerclass : 'cc',
12	activeclass: 'active',
13	inactiveclass: 'inactive'
14});
15
16*/
17
18(function ( $ ) {
19
20	var TabVisible = function(element, opts){
21		
22		var container = $(element);
23		var obj = this;
24					
25		var stat = true;
26		var activeTab = 0;
27		
28		var clicks;
29		
30		var options = {
31			selection: 'a.click', 
32			tablist: 'ul.tablist',
33			containerclass : 'cc',
34			activeclass: 'active',
35			inactiveclass: 'inactive'
36		};
37				
38		var initialize = function() {
39		
40			options = $.extend( {}, options, opts );
41					
42			clicks = container.find(options.selection);
43			if(clicks.length <= 0) {return false;}
44			
45			container.addClass('cvready');
46			container.attr('role', 'tablist');
47			
48			_enableClicks();
49		};
50		
51		var _enableClicks = function() {
52			
53			
54			
55			var length = clicks.length;
56			var html = $('html');
57			
58			if(html.hasClass('ie7')) {
59				
60				var modulus = length % 3;
61				if(modulus > 0) {
62					var pos = modulus-1;
63					modulus = 3 - modulus;
64					for (var i = 0;i < modulus; i++) {
65						$(clicks[pos]).parent('li').after('<li class="ietab"></li>');
66					}
67				}
68			}
69			
70			clicks.each(function(index, clk) {		
71				clk = $(clk);
72				if(clk.attr('href')) {
73					var clkID = clk.attr('href').split("#")[1];
74
75					if($("#"+clkID).length > 0) {
76						clk.attr('role', 'tab');
77						clk.listitem = clk.parent('li');
78						clk.container = $("#"+clkID);
79						clk.container.attr('role', 'tabpanel');
80						clk.nr = index;	
81						
82						clk.data({
83							"nr" : clk.nr,
84							"listitem" : clk.listitem,
85							"container" : clk.container
86						});
87						
88						if(clk.hasClass(options.activeclass)) {
89							_show(clk);
90						} else {
91							_hide(clk);
92						}
93						if(index+3 > (length-1)) {
94							clk.addClass('lastrow');
95						}
96						if(index == 0 && length == 1) { // wenn nur ein Tab keine Lastrow CSS Klasse, da sonst kein zwiter Tab der nachfolgenden COntent nach unten schiebt
97							clk.listitem.addClass('onlyrow');
98						}
99						
100						clk.on("click touchstart", function(event){
101							event.preventDefault();
102							_toggle(clk); 
103						});
104						
105					}
106				}
107			});
108		};
109		var _toggle = function(clk) {
110			if(stat) {
111				if (!clk.container.hasClass('active')) {
112					stat = false;
113					_hideAll();
114					_show(clk);			
115				}
116			}	
117		};
118		var _show = function(el) {
119			el.container.show();
120			activeTab = el.nr;
121			el.listitem.removeClass(options.inactiveclass).addClass(options.activeclass);
122			el.attr('aria-selected','true');
123			el.attr('tabindex','0');
124			el.find('a').attr('tabindex','-1');
125			el.container.attr('aria-hidden','false');
126			el.container.focus();
127			stat = true;		
128			$(window).trigger('scroll');
129		};
130		var _hide = function(el) {
131			el.container.hide();
132			el.listitem.removeClass(options.activeclass).addClass(options.inactiveclass);
133			el.attr('aria-selected','false');
134			el.attr('tabindex','-1');
135			el.find('a').attr('tabindex','0');
136			el.container.attr('aria-hidden','true');
137			stat = true;
138		};
139		var _hideAll = function() {
140			clicks.each(function(index, clk) {	
141				clk = $(clk);
142				clk.nr = clk.data('nr');
143				clk.listitem = clk.data('listitem');
144				clk.container = clk.data('container');
145				_hide(clk);
146			});
147		};
148		
149		initialize();			
150	};
151
152	$.fn.tabVisible = function(options) {
153		return this.each(function(){
154      		var element = $(this);	
155			if (element.data('tabs')) return;
156			var tabVisible = new TabVisible(this, options);
157			element.data('tabs', tabVisible);						
158		});		
159	};
160	
161}(jQuery));