Как сделать табы на jQuery - Snipp.ru

Как сделать табы на jQuery - https://snipp.ru/jquery/tabs#tag-6355

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post">

<div id="tabs">
	<ul class="tabs-nav">
		<li><a href="#tab-1">Вкладка №1</a></li>
		<li><a href="#tab-2">Вкладка №2</a></li>
		<li><a href="#tab-3">Вкладка №3</a></li>
	</ul>	
	<div class="tabs-items">
		<div class="tabs-item" id="tab-1">
      <input type="text" name="name">
			<strong>Текст вкладки №1</strong> Proin elit arcu, rutrum commodo, vehicula tempus, 
			commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam 
			elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus 
			auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend.
		</div>
		<div class="tabs-item" id="tab-2">
    <input type="text" name="name1">
			<strong>Текст вкладки №2</strong> Morbi tincidunt, dui sit amet facilisis feugiat,
			odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie 
			turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut 
			tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in.
		</div>
		<div class="tabs-item" id="tab-3">
    <input type="text" name="name2" required>
			<strong>Текст вкладки №3</strong> Mauris eleifend est et turpis. Duis id erat. Susp 
			potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu 
			congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad 
			litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. 
		</div>		
	</div>
</div>
<button type="submit">
Save
</button>
</form>

CSS

body {
	font-size:14px;
	padding: 15px 20px;
}
#tabs {
	margin: 10px 0;
}
.tabs-nav {
	overflow: hidden;
	margin: 0;
	padding: 0;
}
.tabs-nav li {
	display: block;
	float: left;
	padding: 0;
	list-style: none;
}    
.tabs-nav a {
	display: block;
	padding: 10px 20px;
	border-top: 1px solid #ccc;  
	border-bottom: 1px solid #ccc;
	border-left: 1px solid #ccc;
	background: #fbfbfb; 
	font-size: 16px;
	text-decoration: none;
	text-align: center;
	color: #999;
}		
.tabs-nav li:first-child a {
	border-radius: 5px 0 0 0; 
}
.tabs-nav li:last-child a {
	display: block;
	border-right: 1px solid #ccc;
	border-radius: 0 5px 0 0; 
}
.tabs-nav a.active {
	border-bottom: 1px solid #fff;
	background: #fff;
	color: #000;
}    
.tabs-items {
	border: 1px solid #ccc;
	border-radius: 0 5px 5px 5px;
	background: #fff;
	margin: -1px 0 0 0;
}
.tabs-item {
	padding: 15px;
}

JavaScript

$(function() {
	var tab = $('#tabs .tabs-items > div'); 
	tab.hide().filter(':first').show(); 
	$('#tabs .tabs-nav a').click(function(){
		tab.hide(); 
		tab.filter(this.hash).show(); 
		$('#tabs .tabs-nav a').removeClass('active');
		$(this).addClass('active');
		return false;
	}).filter(':first').click();

	$('.tabs-target').click(function(){
		$('#tabs .tabs-nav a[href=' + $(this).data('id')+ ']').click();
	});
$("button").on("click", function() {
  $("form").find(":input").each(function() {
    if (this.required && this.value == "") {
      let elem = this.closest("div").id;
      $('#tabs .tabs-nav a[href=#' + elem + ']').click();
      $("#" + this.name).focus();
      return false;
    }
  });
  });
});