Jquery UI - 设置通过Ajax使用Content的默认选项卡

时间:2013-03-24 01:23:53

标签: jquery jquery-ui

我正在使用带有Jquery UI库的AJAX选项卡。我需要根据页面更改默认选项卡。我做了很多搜索并尝试了很多。不幸的是,我没有看到任何在Ajax选项卡上实现的示例。

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Test</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" href="uistyle.css" />
<script>
$(function() {
$( "#tabs" ).tabs()({
active: 2,
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="#">Tab 1</a></li>
<li><a href="#">Tab 2</a></li>
<li><a href="#">Tab3</a></li>
</ul>
</div>
</body>
</html>

1 个答案:

答案 0 :(得分:1)

你可以做的是使用哈希标签。所以你说你的页面是否是index.html。你可以说:

的javascript:

if (window.location.hash == '#page1') $( "#tabs" ).tabs({ active: 1 });

HTML

<div id="tabs">
    <ul>
    <li><a href="index.html#page1">Tab 1</a></li>
    <li><a href="index.html#page2">Tab 2</a></li>
    <li><a href="index.html#page3">Tab3</a></li>
    </ul>
</div>