jquery ui选项卡在表单内时覆盖边框答案

【问题标题】：jquery ui tabs overlay border when inside a formjquery ui选项卡在表单内时覆盖边框
【发布时间】：2011-01-07 17:43:41
【问题描述】：

当我将 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 中的一个错误？

【问题讨论】：

“绘制错误”和“覆盖边框”是什么意思？

标签： jquery jquery-ui forms jquery-ui-tabs

【解决方案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 文件。我没有看到任何“绘图错误”

【讨论】：

其实我用的是另一个css文件，和jquery有冲突。