样例图：
1: 下载相关的css 和 js
1-1 http://stilbuero.de/jquery/tabs_3/ui.tabs.css
1-2 http://stilbuero.de/jquery/tabs_3/jquery-1.2.6.js
http://stilbuero.de/jquery/tabs_3/ui.core.js
http://stilbuero.de/jquery/tabs_3/ui.tabs.js
2: 组织相关html代码
<div id="myDIV"> 大div的支持
<ul> tab标签容器
<li><a href="#tab1"><span>tab1</span></a></li> 连接定位 href="#tab1" #后边就是相对应的div层id
<li><a href="#tab2"><span>tab2</span></a></li>
<li><a href="#tab3"><span>tab3</span></a></li>
</ul>
<div id="tab1">fdsafdsa</div>
<div id="tab2">dddddddd</div>
<div id="tab3">ddddddddddd</div>
</div>
3: 在相关的为止上 添加javascript代码
myDIV 是你tab的那个大div的id "> ul" 找到定位的div 下的 ul
$(function(){
$('#myDIV > ul').tabs();
});
样例代码如下
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>jQuery UI Tabs / Tabs 3</title>
<link rel="stylesheet" href="http://stilbuero.de/jquery/tabs_3/ui.tabs.css" type="text/css" media="print, projection, screen">
<script src="http://stilbuero.de/jquery/tabs_3/jquery-1.2.6.js" type="text/javascript"></script>
<script src="http://stilbuero.de/jquery/tabs_3/ui.core.js" type="text/javascript"></script>
<script src="http://stilbuero.de/jquery/tabs_3/ui.tabs.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#myDIV > ul').tabs();
});
</script>
</head>
<body>
<div id="myDIV">
<ul>
<li><a href="#tab1"><span>tab1</span></a></li>
<li><a href="#tab2"><span>tab2</span></a></li>
<li><a href="#tab3"><span>tab3</span></a></li>
</ul>
<div id="tab1">fdsafdsa</div>
<div id="tab2">dddddddd</div>
<div id="tab3">ddddddddddd</div>
</div>
</body>
</html>
4433
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
