Tutorial #42 del curso de JQuery, en este tutorial veremos el widget tabs de jquery-ui, que nos permite crear una interfaz de navegación por pestañas, apropiado para simplificar contenido en un sitio web.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Jquery UI - tabs</title>
<link href="jquery-ui/jquery-ui.css" rel="stylesheet">
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tab-1">Título 1</a></li>
<li><a href="#tab-2">Título 2</a></li>
<li><a href="#tab-3">Título 3</a></li>
</ul>
<div id="tab-1">
<p>Tab1 ipsum dolor sit amet, consectetur adipisicing elit. Ipsum omnis dolor quos explicabo, quod facilis velit ducimus! Unde veniam nobis nesciunt iusto! Cumque, voluptatibus, libero. Ipsa, vel? Placeat, neque, nobis.</p>
</div>
<div id="tab-2">
<p>Tab2 dolorum similique eaque sapiente, voluptates eveniet, sequi quia, perferendis ex, deleniti incidunt. Commodi beatae est fugiat autem mollitia quo minus similique, ratione eveniet, nobis aliquam officiis id libero odio.</p>
</div>
<div id="tab-3">
<p>Tab3 t possimus amet obcaecati minus distinctio omnis corrupti! Cumque maxime iste eaque, facere, ipsam molestias facilis at, in officia quisquam blanditiis temporibus pariatur. Maiores consequatur, atque suscipit veniam, iusto reiciendis?</p>
</div>
</div>
<script src="js/jquery-2.1.3.min.js"></script>
<script src="jquery-ui/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#tabs').tabs({
event: "mouseover"
});
});
</script>
</body>
</html>