缺省情況下，標(biāo)簽頁是展開的，可以通過設(shè)置 collapsible 為 true 使得標(biāo)簽頁支持收縮和展開。
<script>
$(function () {
$("#tabs").tabs({
collapsible: true
});
});
</script>http://wiki.jikexueyuan.com/project/jquery-tutorial/images/57.png" alt="" />
jQuery 的標(biāo)簽頁也支持通過 Ajax 方法來加載頁面，這是通過設(shè)置 href 屬性來實(shí)現(xiàn)，href 指向其它頁面，這是 jQuery 通過 Ajax 方法讀取指定頁面，如果加載時(shí)間過長，則頁面顯示 Loading (加載中），如果無法加載，也可以通過配置 beforeLoad 設(shè)置錯(cuò)誤信息。
<script>
$(function() {
$( "#tabs" ).tabs({
beforeLoad: function( event, ui ) {
ui.jqXHR.error(function() {
ui.panel.html(
"Couldn't load this tab. We'll try to fix this as soon as possible. " +
"If this wouldn't be a demo." );
});
}
});
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Preloaded</a></li>
<li><a href="ajax/content1.html">Tab 1</a></li>
<li><a href="ajax/content2.html">Tab 2</a></li>
<li><a href="ajax/content3-slow.php">Tab 3 (slow)</a></li>
<li><a href="ajax/content4-broken.php">Tab 4 (broken)</a></li>
</ul>
<div id="tabs-1">
<p>Proin elit arcu, rutrum commod</p>
</div>
</div>可以通過設(shè)置 event:mouseover 來實(shí)現(xiàn)，這樣當(dāng)鼠標(biāo)移動(dòng)到某個(gè)頁面，該頁面則自動(dòng)展開。
<script>
$(function() {
$( "#tabs" ).tabs({
event: "mouseover"
});
});
</script>通過 CSS 和一些 JavaScript 可以把標(biāo)簽頁的標(biāo)題顯示在底部或是左邊
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Demos</title>
<link rel="stylesheet" href="themes/trontastic/jquery-ui.css" />
<script src="scripts/jquery-1.9.1.js"></script>
<script src="scripts/jquery-ui-1.10.1.custom.js"></script>
<script>
$(function () {
$("#tabs").tabs();
// fix the classes
$(".tabs-bottom .ui-tabs-nav, .tabs-bottom .ui-tabs-nav > *")
.removeClass("ui-corner-all ui-corner-top")
.addClass("ui-corner-bottom");
// move the nav to the bottom
$(".tabs-bottom .ui-tabs-nav").appendTo(".tabs-bottom");
});
</script>
<style>
/* force a height so the tabs don't jump as content height changes */
#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 id="tabs-1">
<p>Proin elit arcu, rutrum commodo, vehicula tempus, </p>
</div>
<div id="tabs-2">
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, </p>
</div>
<div id="tabs-3">
<p>Mauris eleifend est et turpis. Duis id erat. </p>
<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, </p>
</div>
</div>
</body>
</html>http://wiki.jikexueyuan.com/project/jquery-tutorial/images/58.png" alt="" />
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Demos</title>
<link rel="stylesheet" href="themes/trontastic/jquery-ui.css" />
<script src="scripts/jquery-1.9.1.js"></script>
<script src="scripts/jquery-ui-1.10.1.custom.js"></script>
<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">
<p>Proin elit arcu, rutrum commodo, vehicula tempus, </p>
</div>
<div id="tabs-2">
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, </p>
</div>
<div id="tabs-3">
<p>Mauris eleifend est et turpis. Duis id erat. </p>
<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, </p>
</div>
</div>
</body>
</html>http://wiki.jikexueyuan.com/project/jquery-tutorial/images/59.png" alt="" />
掃碼關(guān)注鍍金池微信號(hào)
手機(jī)訂課，優(yōu)惠多多