Untitled

<!DOCTYPE html>
<html>
<head>
	<title>Таб</title>
	<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>

	<div class="tabs">
		<header>
			<div class="tab active" data-tab="1">Почетна</div>
			<div class="tab" data-tab="2">Друга</div>
			<div class="tab" data-tab="3">Трећа</div>
			<div class="tab" data-tab="4">Трећа</div>
		</header>
		<main>
			<div class="active" id="tab1">
				Почетна страна и неки садржај за то. Почетна страна и неки садржај за то.Почетна страна и неки садржај за то. Почетна страна и неки садржај за то
			</div>
			<div id="tab2">
				Друга страна и неки садржај за то.Друга страна и неки садржај за то.Друга страна и неки садржај за то.Друга страна и неки садржај за то.Друга страна и неки садржај за то.Друга страна и неки садржај за то
			</div>
			<div id="tab3">
				трећи таб страна и неки садржај за то.Друга страна и неки садржај за то.Друга страна и неки садржај за то.Друга страна и неки садржај за то.Друга страна и неки садржај за то.Друга страна и неки садржај за то
			</div>


		</main>
	</div>

	<script src="js.js"></script>
</body>
</html>

var tab = document.querySelectorAll('.tab');
tabs.addEventListener('click' , function(){
	var removeActive = document.querySelector('.tabs header div.active');
	removeActive.classList.remove('active');
	this.classList.add('active');

	var removeActiveContent = document.querySelector('main .active');
	if (removeActiveContent !== null){
		removeActiveContent.classList.remove('active');

	var sadrzaj = document.querySelector('#tab'+ this.dataset.tab);
	sadrzaj.classList.add('active');
	}
});