Y Tabs

<div class="tabs-group">
	<ul class="tabs-list" role="tablist">
		<li><button type="button" class="tabs-btn">טאב ראשון</button></li>
		<li><button type="button" class="tabs-btn">טאב שני</button></li>
	</ul>

	<div class="tabs-div">
		<h3>תוכן טאב ראשון</h3>
		<p>כאן נכנס התוכן של הטאב הראשון.</p>
	</div>

	<div class="tabs-div">
		<h3>תוכן טאב שני</h3>
		<p>כאן נכנס התוכן של הטאב השני.</p>
	</div>
</div>

.tabs-group {
	font-family: system-ui, -apple-system, sans-serif;
	width: 100%;
	margin: 30px auto;
}
.tabs-list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
	z-index: 2;
}
.tabs-btn {
	display: flex;
	min-width: 130px;
	min-height: 50px;
	padding: 10px 25px;
	align-items: center;
	justify-content: center;
	background: #0b0f19;
	color: #94a3b8;
	font-weight: 600;
	font-size: 16px;
	letter-spacing: 0.02em;
	border: 1px solid #334155;
	border-bottom: 1px solid #334155;
	border-radius: 10px 10px 0 0;
	cursor: pointer;
	transition: all 0.3s ease;
}
.tabs-btn:hover:not(.active) {
	background: #111729;
	color: #e2e8f0;
}
.tabs-list > li.active .tabs-btn {
	background: #161f30;
	color: #71F494;
	border-top: 3px solid #71F494;
	border-bottom: 1px solid #161f30;
}
.tabs-div {
	position: relative;
	z-index: 1;
	background: #161f30;
	border: 1px solid #334155;
	border-radius: 12px 0 12px 12px;
	padding: 30px;
	margin-top: -1px;
	color: #e2e8f0;
	line-height: 1.6;
	display: none;
}
.tabs-div.active {
	display: block;
}
.tabs-div h3 {
	margin-top: 0;
	color: #ffffff;
}
@media (max-width: 991px) {
	.tabs-btn {
		flex: 1 1 100%;
		border-radius: 8px;
		border-bottom: 1px solid #334155 !important;
	}
	.tabs-list {
		flex-direction: column;
		gap: 8px;
		margin-bottom: 15px;
	}
	.tabs-div {
		border-radius: 12px;
		margin-top: 0;
	}
}

// Tabs
document.querySelectorAll('.tabs-group').forEach((group, groupIndex) => {
	const currentGroupNum = groupIndex + 1; 
	const tabsList = group.querySelector('.tabs-list');
	const tabs = group.querySelectorAll('.tabs-btn');
	const panels = group.querySelectorAll('.tabs-div');

	if (tabsList) tabsList.setAttribute('role', 'tablist');

	// 1. קריאת ה-Hash הנוכחי משורת הכתובת בטעינת הדף
	const currentHash = window.location.hash.substring(1);
	let activeTabIndex = 0; // ברירת המחדל היא הטאב הראשון

	// 2. מעבר ראשון - הגדרת מזהים (IDs) ובדיקה איזה טאב אמור להיות פעיל
	tabs.forEach((btn, index) => {
		const currentTabNum = index + 1;
		
		// אם לא הוגדר לטאב ID באופן ידני ב-HTML, נייצר לו אחד אוטומטית
		if (!btn.id) {
			btn.id = `group${currentGroupNum}-tab-btn-${currentTabNum}`;
		}
		
		// אם ה-ID של הטאב תואם ל-Hash שבשורת הכתובת, נגדיר אותו כטאב הפעיל
		if (currentHash && btn.id === currentHash) {
			activeTabIndex = index;
		}
	});

	// 3. מעבר שני - החלת הקלאסים והמאזינים
	tabs.forEach((btn, index) => {
		const parentLi = btn.closest('li');
		const panel = panels[index];
		
		const btnId = btn.id;
		// יצירת מזהה תואם לפאנל התוכן
		const panelId = btnId.replace('-btn-', '-div-');

		btn.setAttribute('role', 'tab');
		btn.setAttribute('aria-controls', panelId);

		if (panel) {
			panel.id = panelId;
			panel.setAttribute('role', 'tabpanel');
			panel.setAttribute('aria-labelledby', btnId);
		}

		// הגדרת הטאב הפעיל לפי המידע שאספנו (URL או טאב ראשון)
		if (index === activeTabIndex) {
			parentLi.classList.add('active');
			btn.setAttribute('aria-selected', 'true');
			if (panel) panel.classList.add('active');
		} else {
			parentLi.classList.remove('active');
			btn.setAttribute('aria-selected', 'false');
			if (panel) panel.classList.remove('active');
		}

		// מאזין לחיצה
		btn.addEventListener('click', () => {
			// איפוס קלאסים
			group.querySelectorAll('.tabs-list li').forEach(li => li.classList.remove('active'));
			tabs.forEach(t => t.setAttribute('aria-selected', 'false'));
			panels.forEach(p => p.classList.remove('active'));

			// הפעלת הטאב הנוכחי
			parentLi.classList.add('active');
			btn.setAttribute('aria-selected', 'true');
			if (panel) panel.classList.add('active');

			// עדכון שורת הכתובת (URL) ללא קפיצת דפדפן (Scroll Jump)
			history.replaceState(null, null, '#' + btnId);
		});
	});
});

// Keyboard Navigation
document.addEventListener('keydown', e => {
	const focusedBtn = document.activeElement;
	if (!focusedBtn.classList.contains('tabs-btn')) return;

	const currentLi = focusedBtn.closest('li');
	const parentUl = focusedBtn.closest('.tabs-list');
	const allLis = Array.from(parentUl.querySelectorAll('li'));
	const currentIndex = allLis.indexOf(currentLi);

	let nextIndex;
	if (e.keyCode === 37) { 
		nextIndex = (currentIndex + 1) % allLis.length;
		allLis[nextIndex].querySelector('.tabs-btn').click();
		allLis[nextIndex].querySelector('.tabs-btn').focus();
	} else if (e.keyCode === 39) { 
		nextIndex = (currentIndex - 1 + allLis.length) % allLis.length;
		allLis[nextIndex].querySelector('.tabs-btn').click();
		allLis[nextIndex].querySelector('.tabs-btn').focus();
	}
});