2

总的来说，我在编程方面还很陌生，所以我的问题可能很容易回答，甚至很愚蠢，但我来了：

在我的站点中添加新按钮（或任何元素）时，此按钮不会以正确的样式显示。我究竟做错了什么？

代码：

<html lang="en">
<head>
<meta charset="utf-8" />
<title>Test</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />

<script>
$(function() {
$( "#accordion" ).accordion();
});

 $(function() {
$( "button" )
.button()
.click(function() {
$('#panel').append("<button>OK?</button>");
});
});
</script>

</head>
  <body>
    <button>Go!</button>
    <div id="accordion">
       <h3>Heading 1</h3>
        <div>
          <p id="panel">
        Text
          </p>
        </div>                  
    </div>
   </body>
</html>
4

3 回答 3

0

这可能不是正确的解决方案，但我可以建议一种解决方法。检查 jquery 他们 ui 添加到“Go”按钮的类，并在附加“OK”按钮的同时，将这些类添加到 OK 按钮

像这样的东西。

$('#panel').append("<button class="jquery ui theme button classes">OK?</button>");
于 2013-01-17T09:04:04.987 回答
0

我测试了你的问题。两种不同按钮样式的原因是线条

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />

在哪里导入 jquery-ui.css 样式。这实际上是查看按钮在页面中的位置，并以不同的方式设置它们。由于第二个按钮（“确定？”）带有面板，因此它具有不同的样式。

您可以尝试使用注释掉上述行的示例 - 它仍然可以工作（没有样式），并且两个按钮看起来完全相同。

所以这真的不是 jQuery 问题，而只是CSS样式的问题。如果您想更深入地了解这一点，我建议您在Chrome JS Console或Firefox Firebug中查看您的页面。两者都会告诉你为什么页面上的每个元素看起来都和它一样，即它们会告诉你按钮样式是否来自jquery-ui.cssor style.css。

请注意，我显然无权访问， /resources/demos/style.css 因此我删除了该行以进行测试。我的另一个建议是检查您导入的两种样式是否有竞争样式定义，例如，一种样式表示按钮应该采用这样的样式，而另一种则表示不同的样式。

于 2013-01-17T08:45:46.507 回答
0

附加按钮 OK 后尝试此代码：

 $('#panel').append("<button>OK?</button>");
 $( "#panel button" ).button();
于 2013-01-17T08:28:03.083 回答