Skip to content

Instantly share code, notes, and snippets.

@codingwithsara

codingwithsara/index.html Secret

Created Nov 9, 2018
Embed
What would you like to do?
jQuery UI Tutorial - Tabs & Customize CSS -
<!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>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-3">
<h3>Tab3</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>
</div>
<script>
$(function(){
$("#tabs").tabs();
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment