https://www.jbjs.org/components/tabs/tabs.js?v=8e1ba80c0c

1(function(global){
2	let ignoreHashChangeEvent = false;
3	
4/*
5	tabProp = {anchor} - if we know anchor to find the tab to activate
6	tabProp = {index} - if we know which tab to activate
7	onSetAnotherHeaderCallback is fired when no tab has been found and the first one was activated
8*/
9	global.openTab = function(containerId, tabProp, forceOnChangeCallback, onSetAnotherHeaderCallback) {
10		if (event) {
11			ignoreHashChangeEvent = !!(event.screenX && event.screenY);
12		}
13		forceOnChangeCallback = forceOnChangeCallback || false;
14
15		const anchor = tabProp.anchor;
16		const index = tabProp.index;
17
18		const containerElement = document.getElementById(containerId);
19		if (!containerElement) {
20			return;
21		}
22		const $container = $(containerElement);
23
24		let $header = anchor
25			? $container.find('.tabs-header-item[anchor="' + anchor + '"]').first()
26			: $container.find('.tabs-header-item[tab-index=' + index + ']').first();
27		const headerNotFound = !$header.length;
28		if (headerNotFound) {
29			$header = $container.find('.tabs-header-item[default=1]').first();
30			if (!$header.length) {
31				$header = $container.find('.tabs-header-item').first();
32			}
33			if (!$header.length) {
34				tracePrint(`tabs - header not found`);
35				return;
36			}
37		}
38		$oldActive = $container.find('.tabs-header-item.active');
39		const changed = forceOnChangeCallback || !$oldActive.length || $header.attr('tab-index') !== $oldActive.attr('tab-index');
40		$container.find('.tabs-header-item').removeClass('active');
41		$container.find('.tabs-content-item').removeClass('active');
42		$header.addClass('active');
43		const tabIndex = index ? index : $header.attr('tab-index');
44		$container.find('.tabs-content-item[tab-index="' + tabIndex + '"]').addClass('active');
45
46		if (headerNotFound) {
47			const headerAnchor = $header.attr('anchor');
48			if (typeof onSetAnotherHeaderCallback === 'function' && headerAnchor) {
49				tracePrint(`tabs - onSetAnotherHeaderCallback(${headerAnchor})`);
50				onSetAnotherHeaderCallback(headerAnchor);
51			}
52		}
53		if (changed) {
54			const onChangeCallback = $header.attr('onchange');
55			if (onChangeCallback !== '' && typeof window[onChangeCallback] === 'function') {
56				tracePrint("tabs - onChangeCallback");
57				window[onChangeCallback]($header);
58			}
59		}
60	}
61	global.addEventListener('hashchange', function(){
62		if (!ignoreHashChangeEvent) {
63			const targetLink = document.querySelector(".tabs-header > .tabs-header-item[anchor='" + location.hash.substring(1) +"']");
64			targetLink && targetLink.click();
65		}
66		ignoreHashChangeEvent = false;
67	})
68
69})(window);