jquery ui选项卡在表单内部重叠边框

时间:2011-01-07 17:43:42

标签: jquery jquery-ui forms jquery-ui-tabs

当我在这样的表单中放置一个jquery ui标签时会出现一个绘图错误:

<form>
  <div id="tab-section1">
    <ul>
      <li><a href="#tab1"><span>Principal</span></a></li>
      <li><a href="#tab2"><span>Complement</span></a></li>
    </ul>

    <div id="tab1">
    </div>
    <div id="tab2">
    </div>
  </div>
</form>

但在div内部显示正确:

<div>
  <div id="tab-section2">
    <ul>
      <li><a href="#tab1"><span>Principal</span></a></li>
      <li><a href="#tab2"><span>Complement</span></a></li>
    </ul>

    <div id="tab1">
    </div>
    <div id="tab2">
    </div>
  </div>
</div>

这是jquery中的一个错误?

1 个答案:

答案 0 :(得分:1)

我在这里看不到绘图错误是在http://www.andrewbricker.com/test.php

运行的示例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>test</title>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/themes/base/jquery-ui.css" type="text/css" media="all" /> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js" type="text/javascript"></script> 

<script language="javascript">
$(function() {
        $( "#tab-section1" ).tabs();
    });
</script>

</head>

<body>

<form>
  <div id="tab-section1">
    <ul>
      <li><a href="#tab1"><span>Principal</span></a></li>
      <li><a href="#tab2"><span>Complement</span></a></li>
    </ul>

    <div id="tab1">
    </div>
    <div id="tab2">
    </div>
  </div>
</form>

</body>
</html>

也许你没有成功地提取jQuery UI CSS文件。我没有看到任何“抽奖错误”