今晚用JQUI的时候有发现JQUI的问题了,其实说实话,JQUI的BUG还真不少,可能也是他流行不起来的原因,呵呵
下面说下这个小BUG,绕个弯就可以解决,
当使用JQUI的tabs时,当第一个选项卡放置accordion正常.,
当把accordion放置到当前未打开的选择卡的时候,出问题了,accordion没法打开,原因是初始化accordion的时候无法取得正确的高度
唯一的办法就是当TABS切换完毕的时候在去触发那个accordion初始化,一切都将,下面附上代码
(不玩JQUI的可能不知道我上面说什么,嘻嘻)
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>jQuery UI Tabs - Default functionality</title>
<link type="text/css" href="http://www.cnblogs.com/themes/base/jquery.ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://www.cnblogs.com/jquery-1.4.2.js"></script>
<script type="text/javascript" src="http://www.cnblogs.com/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="http://www.cnblogs.com/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="http://www.cnblogs.com/ui/jquery.ui.tabs.js"></script>
<script type="text/javascript" src="http://www.cnblogs.com/ui/jquery.ui.accordion.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<script type="text/javascript">
$(function() {
$("#tabs").tabs(show:function(event,ui){
$("#accordion",$(ui.panel)).accordion();
});
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Nunc tincidunt</a></li>
<li><a href="#tabs-2">Proin dolor</a></li>
</ul>
<div id="tabs-1">
</div>
<div id="tabs-2">
<div id="accordion">
<h3><a href="#">Section 1</a></h3>
<div style="height:100px;">
test
</div>
<h3><a href="#">Section 2</a></h3>
<div style="height:100px;">
test
</div>
</div>
</div>
</div>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>jQuery UI Tabs - Default functionality</title>
<link type="text/css" href="http://www.cnblogs.com/themes/base/jquery.ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://www.cnblogs.com/jquery-1.4.2.js"></script>
<script type="text/javascript" src="http://www.cnblogs.com/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="http://www.cnblogs.com/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="http://www.cnblogs.com/ui/jquery.ui.tabs.js"></script>
<script type="text/javascript" src="http://www.cnblogs.com/ui/jquery.ui.accordion.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<script type="text/javascript">
$(function() {
$("#tabs").tabs(show:function(event,ui){
$("#accordion",$(ui.panel)).accordion();
});
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Nunc tincidunt</a></li>
<li><a href="#tabs-2">Proin dolor</a></li>
</ul>
<div id="tabs-1">
</div>
<div id="tabs-2">
<div id="accordion">
<h3><a href="#">Section 1</a></h3>
<div style="height:100px;">
test
</div>
<h3><a href="#">Section 2</a></h3>
<div style="height:100px;">
test
</div>
</div>
</div>
</div>
</body>
</html>