源代碼
點擊運行
<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery UI 標籤頁(Tabs) - 通過 Ajax 獲取內容</title> <link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css"> <script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> <link rel="stylesheet" href="/try/demo_source/jqueryui/style.css"> <script> $(function() { $( "#tabs" ).tabs({ beforeLoad: function( event, ui ) { ui.jqXHR.error(function() { ui.panel.html( "不能加載該標籤頁。如果這不是一個演示。" + "我們會儘快修復這個問題。" ); }); } }); }); </script> </head> <body> <div id="tabs"> <ul> <li><a href="#tabs-1">預加載</a></li> <li><a href="ajax/content1.html">標籤 1</a></li> <li><a href="ajax/content2.html">標籤 2</a></li> <li><a href="ajax/content3-slow.asp">標籤 3 (慢的)</a></li> <li><a href="ajax/content4-broken.asp">標籤 4 (損壞的)</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>
運行結果