1.引入文件
jquery.x.x.x.js文件
jquery-ui-x.x.x.custom.js文件
jquery-ui-x.x.x.custom.min.css文件
例子:
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui-1.10.3.custom.min.js"></script>
<link rel="stylesheet" href="css/jquery-ui-1.10.3.custom.min.css">
2.写HTML
例子:
<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>content</p>
</div>
</div>
3.写javascript代码
例子 :
<script>
$(function() {
$( "#tabs" ).tabs({
event: "mouseover",//加这个就是鼠标悬浮产生事件,不加就是点击事件
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>