jQuery UI example - tabs (Tabs)
Single content area of a multi-panel, each panel in the list title.
For more details about the tabs components, see the API documentation tab member (the Widget Tabs) .
The default function
Click the tab to switch is divided into different logical portion of the content.
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI tabs (Tabs) - The default function </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#tabs") .tabs ();
});
</ Script>
</ Head>
<Body>
<Div id = "tabs">
<Ul>
<Li> <a href="#tabs-1"> Nunc tincidunt </a> </ li>
<Li> <a href="#tabs-2"> Proin dolor </a> </ li>
<Li> <a href="#tabs-3"> Aenean lacinia </a> </ li>
</ Ul>
<Div id = "tabs-1">
<P> 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 adipiscing. Duis orci. aliquam sodales tortor vitae ipsum. aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus . </ p>
</ Div>
<Div id = "tabs-2">
<P> 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 ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus. </ p>
</ Div>
<Div id = "tabs-3">
<P> Mauris eleifend est et turpis. Duis id erat. Suspendisse 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. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus. </ p>
<P> Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit. </ p>
</ Div>
</ Div>
</ Body>
</ Html>
Folding content
Click on the selected tab to switch the content closed / open. To enable this feature, you need to set the collapsible option to true.
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI tabs (Tabs) - Folding content </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#tabs") .tabs ({
collapsible: true
});
});
</ Script>
</ Head>
<Body>
<Div id = "tabs">
<Ul>
<Li> <a href="#tabs-1"> Nunc tincidunt </a> </ li>
<Li> <a href="#tabs-2"> Proin dolor </a> </ li>
<Li> <a href="#tabs-3"> Aenean lacinia </a> </ li>
</ Ul>
<Div id = "tabs-1">
<P> <strong> Click the tab again to close the content panel. </ Strong> </ p>
<P> 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 adipiscing. Duis orci. aliquam sodales tortor vitae ipsum. aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus . </ p>
</ Div>
<Div id = "tabs-2">
<P> <strong> Click the tab again to close the content panel. </ Strong> </ p>
<P> 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 ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus. </ p>
</ Div>
<Div id = "tabs-3">
<P> <strong> Click the tab again to close the content panel. </ Strong> </ p>
<P> Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit. </ p>
</ Div>
</ Div>
</ Body>
</ Html>
Get content via Ajax
Set the value of the href link in a tab to tab to access to external content via Ajax. When Ajax requests waiting for a response, a tab into a "Loading ...", when the load is complete return to the General tab.
Tag 3 and 4 demonstrate the slow loading and damage to AJAX tags, and how to handle server-side errors in these circumstances. Please note that both require a web server can explain PHP. They do not work outside of the file system.
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI tabs (Tabs) - Get content via Ajax </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#tabs") .tabs ({
beforeLoad: function (event, ui) {
ui.jqXHR.error (function () {
ui.panel.html (
"Can not load the tab. If this is not a demo." +
"We will fix the problem as soon as possible.");
});
}
});
});
</ Script>
</ Head>
<Body>
<Div id = "tabs">
<Ul>
<Li> <a href="#tabs-1"> preloaded </a> </ li>
<Li> <a href="ajax/content1.html"> tag 1 </a> </ li>
<Li> <a href="ajax/content2.html"> tag 2 </a> </ li>
<Li> <a href="ajax/content3-slow.php"> tag 3 (slow) </a> </ li>
<Li> <a href="ajax/content4-broken.php"> label 4 (damaged) </a> </ li>
</ Ul>
<Div id = "tabs-1">
<P> 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 adipiscing. Duis orci. aliquam sodales tortor vitae ipsum. aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus . </ p>
</ Div>
</ Div>
</ Body>
</ Html>
Open when the mouse hovers
By event option to switch the parts when the mouse hovers on / off status. The default value is the event "click".
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI tabs (Tabs) - When the mouse hovers over the open </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#tabs") .tabs ({
event: "mouseover"
});
});
</ Script>
</ Head>
<Body>
<Div id = "tabs">
<Ul>
<Li> <a href="#tabs-1"> Nunc tincidunt </a> </ li>
<Li> <a href="#tabs-2"> Proin dolor </a> </ li>
<Li> <a href="#tabs-3"> Aenean lacinia </a> </ li>
</ Ul>
<Div id = "tabs-1">
<P> 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 adipiscing. Duis orci. aliquam sodales tortor vitae ipsum. aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus . </ p>
</ Div>
<Div id = "tabs-2">
<P> 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 ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus. </ p>
</ Div>
<Div id = "tabs-3">
<P> Mauris eleifend est et turpis. Duis id erat. Suspendisse 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. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus. </ p>
<P> Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit. </ p>
</ Div>
</ Div>
</ Body>
</ Html>
Simple operation
Simply add and remove tabs.
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI tabs (Tabs) - simple operation </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
#dialog label, #dialog input {display: block;}
#dialog label {margin-top: 0.5em;}
#dialog input, #dialog textarea {width: 95%;}
#tabs {margin-top: 1em;}
#tabs li .ui-icon-close {float: left; margin: 0.4em 0.2em 0 0; cursor: pointer;}
#add_tab {cursor: pointer;}
</ Style>
<Script>
$ (Function () {
var tabTitle = $ ( "#tab_title"),
tabContent = $ ( "#tab_content"),
tabTemplate = "<li> <a href='#{href}'> # {label} </a> <span class = 'ui-icon ui-icon-close' role = 'presentation'> Remove Tab </ span > </ li> ",
tabCounter = 2;
var tabs = $ ( "#tabs") .tabs ();
// Initialize a modal dialog box: Customize button and an internal reset form "close" callback var dialog = $ ( "#dialog") .dialog ({
autoOpen: false,
modal: true,
buttons: {
Add: function () {
addTab ();
$ (This) .dialog ( "close");
},
Cancel: function () {
$ (This) .dialog ( "close");
}
},
close: function () {
form [0] .reset ();
}
});
// AddTab form: Called when submitting addTab function and close the dialog var form = dialog.find ( "form") .submit (function (event) {
addTab ();
dialog.dialog ( "close");
event.preventDefault ();
});
// Actual addTab function: Use the form above to add a new tab input function addTab () {
var label = tabTitle.val () || "Tab" + tabCounter,
id = "tabs-" + tabCounter,
li = $ (tabTemplate.replace (/ # \ {href \} / g, "#" + id) .replace (/ # \ {label \} / g, label)),
tabContentHtml = tabContent.val () || "Tab" + tabCounter + "content.";
tabs.find ( ".ui-tabs-nav") .append (li);
tabs.append ( "<div id = '" + id + "'> <p>" + tabContentHtml + "</ p> </ div>");
tabs.tabs ( "refresh");
tabCounter ++;
}
// AddTab button: The value of the Open dialog box $ ( "#add_tab")
.button ()
.click (function () {
dialog.dialog ( "open");
});
// Close Icon: Remove tab tabs.delegate ( "span.ui-icon-close" when clicked, "click", function () {
var panelId = $ (this) .closest ( "li") .remove () attr ( "aria-controls").;
$ ( "#" + PanelId) .remove ();
tabs.tabs ( "refresh");
});
tabs.bind ( "keyup", function (event) {
if (event.altKey && event.keyCode === $ .ui.keyCode.BACKSPACE) {
. Var panelId = tabs.find ( ".ui-tabs-active") .remove () attr ( "aria-controls");
$ ( "#" + PanelId) .remove ();
tabs.tabs ( "refresh");
}
});
});
</ Script>
</ Head>
<Body>
<Div id = "dialog" title = "Tab data">
<Form>
<Fieldset class = "ui-helper-reset">
<Label for = "tab_title"> Title </ label>
<Input type = "text" name = "tab_title" id = "tab_title" value = "" class = "ui-widget-content ui-corner-all">
<Label for = "tab_content"> content </ label>
<Textarea name = "tab_content" id = "tab_content" class = "ui-widget-content ui-corner-all"> </ textarea>
</ Fieldset>
</ Form>
</ Div>
<Button id = "add_tab"> Add a tab </ button>
<Div id = "tabs">
<Ul>
<Li> <a href="#tabs-1"> Nunc tincidunt </a> <span class = "ui-icon ui-icon-close" role = "presentation"> Remove tab </ span> </ li>
</ Ul>
<Div id = "tabs-1">
<P> 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 adipiscing. Duis orci. aliquam sodales tortor vitae ipsum. aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus . </ p>
</ Div>
</ Div>
</ Body>
</ Html>
Sort (Sortable)
Drag tabs above to reorder them.
Simply call .ui-tabs-nav element on .sortable() , you can let sortable tabs.
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI tabs (Tabs) - sorting (Sortable) </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
var tabs = $ ( "#tabs") .tabs ();
tabs.find ( ".ui-tabs-nav") .sortable ({
axis: "x",
stop: function () {
tabs.tabs ( "refresh");
}
});
});
</ Script>
</ Head>
<Body>
<Div id = "tabs">
<Ul>
<Li> <a href="#tabs-1"> Nunc tincidunt </a> </ li>
<Li> <a href="#tabs-2"> Proin dolor </a> </ li>
<Li> <a href="#tabs-3"> Aenean lacinia </a> </ li>
</ Ul>
<Div id = "tabs-1">
<P> 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 adipiscing. Duis orci. aliquam sodales tortor vitae ipsum. aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus . </ p>
</ Div>
<Div id = "tabs-2">
<P> 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 ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus. </ p>
</ Div>
<Div id = "tabs-3">
<P> Mauris eleifend est et turpis. Duis id erat. Suspendisse 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. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus. </ p>
<P> Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit. </ p>
</ Div>
</ Div>
</ Body>
</ Html>
The bottom of the tab
With some additional CSS (for positioning) and JS (placed in the correct class element), Jieke tab at the bottom of the content.
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI tabs (Tabs) - at the bottom of the tab page </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#tabs") .tabs ();
// Modify class
$ ( ".tabs-Bottom .ui-tabs-nav, .tabs-bottom .ui-tabs-nav> *")
.removeClass ( "ui-corner-all ui-corner-top")
.addClass ( "ui-corner-bottom");
Mobile navigation in the end portion // $ ( ".tabs-bottom .ui-tabs-nav") .appendTo ( ".tabs-bottom");
});
</ Script>
<Style>
/ * Forced a height, so that the tab does not change with the height of the content is changed * /
#tabs .tabs-spacer {float: left; height: 200px;}
.tabs-bottom .ui-tabs-nav {clear: left; padding: 0 .2em .2em .2em;}
.tabs-bottom .ui-tabs-nav li {top: auto; bottom: 0; margin: 0 .2em 1px 0; border-bottom: auto; border-top: 0;}
.tabs-bottom .ui-tabs-nav li.ui-tabs-active {margin-top: -1px; padding-top: 1px;}
</ Style>
</ Head>
<Body>
<Div id = "tabs" class = "tabs-bottom">
<Ul>
<Li> <a href="#tabs-1"> Nunc tincidunt </a> </ li>
<Li> <a href="#tabs-2"> Proin dolor </a> </ li>
<Li> <a href="#tabs-3"> Aenean lacinia </a> </ li>
</ Ul>
<Div class = "tabs-spacer"> </ div>
<Div id = "tabs-1">
<P> 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 adipiscing. Duis orci. aliquam sodales tortor vitae ipsum. aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus . </ p>
</ Div>
<Div id = "tabs-2">
<P> 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 ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus. </ p>
</ Div>
<Div id = "tabs-3">
<P> Mauris eleifend est et turpis. Duis id erat. Suspendisse 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. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus. </ p>
<P> Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit. </ p>
</ Div>
</ Div>
</ Body>
</ Html>
Vertical Tabs
Click the tab to switch is divided into different logical portion of the content.
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI tabs (Tabs) - vertical tabs </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#tabs") .tabs () AddClass ( "ui-tabs-vertical ui-helper-clearfix").;
$ ( "#tabs Li") .removeClass ( "ui-corner-top") .addClass ( "ui-corner-left");
});
</ Script>
<Style>
.ui-tabs-vertical {width: 55em;}
.ui-tabs-vertical .ui-tabs-nav {padding: .2em .1em .2em .2em; float: left; width: 12em;}
.ui-tabs-vertical .ui-tabs-nav li {clear: left; width: 100%; border-bottom-width: 1px important; border-right-width:! 0 important; margin:! 0 -1px .2em 0;
.ui-tabs-vertical .ui-tabs-nav li a {display: block;}
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active {padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px;}
.ui-tabs-vertical .ui-tabs-panel {padding: 1em; float: right; width: 40em;}
</ Style>
</ Head>
<Body>
<Div id = "tabs">
<Ul>
<Li> <a href="#tabs-1"> Nunc tincidunt </a> </ li>
<Li> <a href="#tabs-2"> Proin dolor </a> </ li>
<Li> <a href="#tabs-3"> Aenean lacinia </a> </ li>
</ Ul>
<Div id = "tabs-1">
<H2> Content Title 1 </ h2>
<P> 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 adipiscing. Duis orci. aliquam sodales tortor vitae ipsum. aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus . </ p>
</ Div>
<Div id = "tabs-2">
<H2> Content title 2 </ h2>
<P> 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 ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus. </ p>
</ Div>
<Div id = "tabs-3">
<H2> Content Title 3 </ h2>
<P> Mauris eleifend est et turpis. Duis id erat. Suspendisse 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. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus. </ p>
<P> Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit. </ p>
</ Div>
</ Div>
</ Body>
</ Html>