Skip to content

Instantly share code, notes, and snippets.

@codingwithsara

codingwithsara/index.html Secret

Created November 9, 2018 05:23
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save codingwithsara/1b74eaff446eb795f5feab11ea0265b4 to your computer and use it in GitHub Desktop.
Save codingwithsara/1b74eaff446eb795f5feab11ea0265b4 to your computer and use it in GitHub Desktop.
Download ZIP
jQuery UI Tutorial - Tabs & Customize CSS -
Raw
index.html
<!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