jQuery UI Tutorial - Tabs & Customize CSS -

jQuery UI Tutorial – Tabs & Customize CSS –

Contents

Introduction & Demo
Sample Code

Introduction & Demo

In this video, I’ll show you how to set jQuery UI Tabs and customize CSS!

First, please check the demo page.

All you need is a text editor!
Hope you enjoy coding 🙂

Sample Code

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Custom Tabs</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
 
	<style>
		.container {
			width: 500px;
			margin: 100px auto;
		}
		.ui-widget-header {
			background: none;
			border: none;
		}
		#tabs {
			border: none;
		}
		.ui-tabs .ui-tabs-panel {
			border: 1px solid lightgrey;
			border-radius: 2px;
			padding: 5% 10%;
		}
		.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
			background: steelblue;
			border: none;
		}
		.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
			background: lightseagreen;
		}
		.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited, a.ui-button, a:link.ui-button, a:visited.ui-button, .ui-button {
			color: white;
		}
	</style>
</head>
<body>
<div class="container">
	<div id="tabs">
		<ul>
			<li><a href="#tabs-1">Tab1</a></li>
			<li><a href="#tabs-2">Tab2</a></li>
			<li><a href="#tabs-3">Tab3</a></li>
		</ul>
		<div id="tabs-1">
			<h3>Tab1</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis neque nec luctus maximus. Donec eu eleifend libero, nec scelerisque metus. Morbi volutpat turpis pretium leo auctor luctus. Cras suscipit lectus sit amet tellus vestibulum porta. Nullam hendrerit ante erat, eget pretium nunc faucibus id. Integer ut urna tellus. In pharetra, lectus sed ornare facilisis, nisl ligula interdum massa, at vehicula libero enim id libero. Sed ac fringilla purus. Aenean finibus est sit amet faucibus porta. Integer interdum finibus tempor.</p>
		</div>
		<div id="tabs-2">
			<h3>Tab2</h3>
			<p>Phasellus nisi metus, bibendum a lorem quis, lobortis porttitor nisl. Vivamus quis mollis leo. Vestibulum aliquam arcu augue, ut efficitur urna ornare tincidunt. Aenean quis purus feugiat, lobortis libero ut, consectetur lacus. Praesent orci libero, tincidunt in magna condimentum, feugiat consequat ex. Nulla id erat vel dui lacinia ullamcorper sed vel lectus. Nulla facilisi. Aliquam rhoncus sem at ligula tincidunt, eu bibendum purus tempus. Nullam venenatis felis ante, at auctor purus aliquet sed. In egestas vulputate nulla, quis consequat dolor sagittis nec. Etiam molestie nisi enim, id dignissim magna tristique ut.</p>
		</div>
		<div id="tabs-3">
			<h3>Tab3</h3>
			<p>Duis vel purus fermentum, ultricies ligula id, pellentesque ex. Nunc at purus odio. Integer posuere, purus dictum varius finibus, tortor massa venenatis neque, sit amet laoreet diam tortor id ex. Nulla dictum sed arcu vel porttitor. Sed sodales rutrum risus et consequat. Mauris libero leo, posuere nec condimentum a, pellentesque sit amet augue. Morbi id velit varius, euismod turpis a, vestibulum leo.</p>
		</div>
	</div>
</div>
<script>
	$(function(){
		$("#tabs").tabs();
	});
</script>
</body>
</html>