Cara Membuat Tabs di Samping dengan Javascript

Jika teman-teman sudah melihat artikel saya yang sebelumnya mengenai cara membuat tabs, disini saya akan sedikit merubah tampilannya ke samping jadi jika sebelumnya ada pada posisi di atas, sekarang kita buat tabs itu pada posisi di samping, masih sama disini kita akan buat dengan menggunakan javascript ya, jadi jangan kemana-mana simak terus ya teman-teman.

Membuat Tabs di Samping dengan Javascript caranya hampir sama bahkan mirip ya, mungkin CSSnya saja, tetapi kadang masih ada saja yang bingung, oke artikel ini saya buat karena murid saya ada yang tanya, sekalian saja kita buat artikelnya ya, oke langsung saja ya kita lihat caranya:

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
			box-sizing: border-box;
		}
		.pageContent{
			display: none;
		}
		.firstShow{
			display: block;
		}
		.container{
			display: flex;
			flex-wrap: wrap;
		}
		.left{
			flex: 20%;
		}
		.right{
			flex: 80%;
		}
		.left{
			background: #f1f1f1;
			height: 500px;
		}
		.left li{
			list-style: none;
			line-height: 50px;
			text-align: center;
		}
		.left li:hover{
			background: #cccccc
		}
		.left li a{
			text-decoration: none;
			color: #4caf50;
			display: block;
		}
		.right{
			padding-left: 20px;
		}
		.active{
			background: #cccccc
		}
		@media (max-width: 500px){
			.left{
				height: auto;
				flex: 100%;
			}
			.right{	
				flex: 100%;
				text-align: center;
			}
		}
	</style>
</head>
<body>
<div class="container">
	<div class="left">
		<ul>
			<li><a href="" onclick="openPage(event, 'home')" class="cekAktive">Home</a></li>
			<li><a href="" onclick="openPage(event, 'profile')" class="cekAktive">Profile</a></li>
			<li><a href="" onclick="openPage(event, 'product')" class="cekAktive">Product</a></li>
			<li><a href="" onclick="openPage(event, 'contact')" class="cekAktive">Contact</a></li>
		</ul>
	</div>
	<div class="right">
		<div class="pageContent firstShow" id="home">
			<h1>Ini Halaman Home</h1>
			<p>Halo Selamat datang dihlaman Home</p>
		</div>
		<div class="pageContent" id="profile">
			<h1>Ini Halaman Profile</h1>
			<p>Halo Selamat datang dihlaman Profile</p>
		</div>
		<div class="pageContent" id="product">
			<h1>Ini Halaman Product</h1>
			<p>Halo Selamat datang dihlaman Product</p>
		</div>
		<div class="pageContent" id="contact">
			<h1>Ini Halaman Contact</h1>
			<p>Halo Selamat datang dihlaman Contact</p>
		</div>
	</div>
</div>
<script type="text/javascript">
	function openPage(event, page)
	{
		event.preventDefault();

		pageContent = document.getElementsByClassName("pageContent");
		for(var i = 0; i<pageContent.length; i++){
			pageContent[i].style.display = "none"
		}
		var tot = document.getElementById(page).style.display = "block"
		var aktif = document.getElementsByClassName("cekAktive");
		for(var i = 0; i<aktif.length; i++){
			aktif[i].className = aktif[i].className.replace(" active", "") 
		}

		event.currentTarget.className += " active";
		console.log(tot)
	}
</script>
</body>
</html>

Silahkan teman-teman copy terlebih dahulu, bisa teman-teman lihat saya gunakan event onclick dengan tujuan function openPage, dengan argumen event dan satu lagi kita sesuaikan dengan yang di click, nah argumen itu yang ada pada value function di bawahnya.

Jika teman-teman lihat masih cukup jelas ya tentang javascriptnya. Oke sekarang kita lihat hasilnya

Silahkan teman-teman coba satu-satu, dan lihat hasilnya, oke saya rasa cukup sampai disini ya belajar kita tentang Cara Membuat Tabs di Samping dengan Javascript, semoga bermanfaat dan sampai jumpa pada artikel berikutnya terimkasih