Сделать вкладки внутри страницы

Хочу сделать вкладки на странице, Например как в Google Chrome.

Ответ

var tab; // заголовок вкладки var tabContent; // блок содержащий контент вкладки window.onload = function() { tabContent = document.getElementsByClassName('tabContent'); tab = document.getElementsByClassName('tab'); hideTabsContent(1); } document.getElementById('tabs').onclick = function(event) { var target = event.target; if (target.className == 'tab') { for (var i = 0; i < tab.length; i++) { if (target == tab[i]) { showTabsContent(i); break; } } } } function hideTabsContent(a) { for (var i = a; i < tabContent.length; i++) { tabContent[i].classList.remove('show'); tabContent[i].classList.add("hide"); tab[i].classList.remove('whiteborder'); } } function showTabsContent(b) { if (tabContent[b].classList.contains('hide')) { hideTabsContent(0); tab[b].classList.add('whiteborder'); tabContent[b].classList.remove('hide'); tabContent[b].classList.add('show'); } } #tabs .tab { display: inline-block; padding: 5px 10px; cursor: pointer; position: relative; z-index: 5; } #tabs .whiteborder { border: 1px solid #707070; border-bottom: 1px solid #fff; border-radius: 3px 3px 0 0; } #tabs .tabContent { width: 300px; height: 60px; border: 1px solid #707070; position: relative; top: -1px; z-index: 1; padding: 10px; border-radius: 0 0 3px 3px } #tabs .hide { display: none; } #tabs .show { display: block; }

Tab 1

Tab 2

Tab 3

1

2

3