Cách tạo tabs từ jquery đơn giản

Do đang cần làm chức năng nhúng video vào website, và các list video có thể thay đổi nên cần tìm hiểu tabs, chia sẻ lại các bạn cách tạo tabs từ jquery đơn giản được tham khảo từ nguồn : https://codepen.io/DobsonDev/pen/ByaNZd

	<div class="tabs">
	  <ul id="tabs-nav">
		<li><a href="#tab1">Bob</a></li>
		<li><a href="#tab2">Dante</a></li>
		<li><a href="#tab3">Randall</a></li>
		<li><a href="#tab4">Jay</a></li>
	  </ul> <!-- END tabs-nav -->
	  <div id="tabs-content">
		<div id="tab1" class="tab-content">
		  <h2>Silent Bob</h2>
		  <p>"You know, there's a million fine looking women in the world, dude. But they don't all bring you lasagna at work. Most of 'em just cheat on you."</p>
		</div>
		<div id="tab2" class="tab-content">
		  <h2>Dante Hicks</h2>
		  <p>"My friend here's trying to convince me that any independent contractors who were working on the uncompleted Death Star were innocent victims when it was destroyed by the Rebels."</p>
		</div>
		<div id="tab3" class="tab-content">
		  <h2>Randall Graves</h2>
		  <p>"In light of this lurid tale, I don't even see how you can romanticize your relationship with Caitlin. She broke your heart and inadvertently drove men to deviant lifestyles."</p>
		</div>
		<div id="tab4" class="tab-content">
		  <h2>Jay</h2>
		  <p>"I don't care if she's my cousin or not, I'm gonna knock those boots again tonight."</p>
		</div>
	  </div> <!-- END tabs-content -->
	</div> <!-- END tabs -->

// Show the first tab and hide the rest
$('#tabs-nav li:first-child').addClass('active');
$('.tab-content').hide();
$('.tab-content:first').show();

// Click function
$('#tabs-nav li').click(function(){
  $('#tabs-nav li').removeClass('active');
  $(this).addClass('active');
  $('.tab-content').hide();
  
  var activeTab = $(this).find('a').attr('href');
  $(activeTab).fadeIn();
  return false;
});
/* Tabs */
.tabs {
  width: 600px;
  background-color: #09F;
  border-radius: 5px 5px 5px 5px;
}
ul#tabs-nav {
  list-style: none;
  margin: 0;
  padding: 5px;
  overflow: auto;
}
ul#tabs-nav li {
  float: left;
  font-weight: bold;
  margin-right: 2px;
  padding: 8px 10px;
  border-radius: 5px 5px 5px 5px;
  /*border: 1px solid #d5d5de;
  border-bottom: none;*/
  cursor: pointer;
}
ul#tabs-nav li:hover,
ul#tabs-nav li.active {
  background-color: #08E;
}
#tabs-nav li a {
  text-decoration: none;
  color: #FFF;
}
.tab-content {
  padding: 10px;
  border: 5px solid #09F;
  background-color: #FFF;
}

/* Just for CodePen styling - don't include if you copy paste */
html {
  margin: 0;
  padding: 0;
}
body { 
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
  font-weight: 300;
  margin: 2em;
}

Bạn có thể tải file trực tiếp tham khảo tại đây:
tabs