Question

背景

我正在使用Intuit Web Designs创建一个网站。在我看来，他们有一个非常奇怪的HTML设置，如下所示。 Intuit允许我添加一个HTML框（用于粘贴HTML代码）。但是，该网站要求我将<head></head>标记内的任何内容粘贴到位于页面一侧的单独框中。

我正在尝试做什么： 我有两个功能齐全的jQuery脚本 - 每个脚本都写在不同的文档中。我将html从一个文档上传到Intuit内部的HTML工具中。然后我将jQuery脚本上传到Intuit中的特殊标题框中。一切都很完美。

现在是时候添加第二个文档（再次使用HTML和jQuery），因为我希望两个文档在同一页面上运行。 html上传得很好，但是只要我将第二个jQuery脚本合并到第一个jQuery脚本中，Chrome控制台就会开始告诉我JQuery脚本＃1缺少文件（不可能，因为它在我添加第二个脚本之前就已经工作了！）。所以，总而言之，似乎添加第二个脚本就可以解决所有问题。

以下是我的两份文件（包括完整代码）：

文档＃1：

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

<script src="jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.pack.js" type="text/javascript"></script>    
<link href="jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css">
<link href="test.css" rel="stylesheet" type="text/css">

<script type="text/javascript">

$(document).ready(function() {

$("#fancyBoxLink").fancybox({
        'transitionIn'  :   'elastic',
        'transitionOut' :   'elastic',
        'speedIn'       :   700,
        'speedOut'      :   200, 
        'overlayShow'   :   false           
});

});     


</script>

</head>

<body>

<center>
<p>
You can
<a href="#div_table" id="fancyBoxLink">Click here to see our various things</a>
</p>
</center>

<div style="display:none" > 
<div id="div_table">

<table id="payment_options" summary="Payment Plans">
<colgroup>
<col class="poptions-odd">
<col class="poptions-even">
<col class="poptions-odd">
<col class="poptions-even"> 
    </colgroup>
<thead>
<tr>
<th scope="col" id="poptions-features">Features</th>
<th scope="col" id="poptions-startup">Startup</th>
<th scope="col" id="poptions-value">Standard</th>
<th scope="col" id="poptions-premium">Premium</th>
</tr>
</thead>
<tbody>
<tr>
<td>Plan one</td>
<td>2</td>
<td>5</td>
<td>Unlimited</td>
</tr>

</tbody>
</table>
</div>
</div>

</body>

</html>

文件＃2：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>

<title>{ visibility: inherit; } The Fancybox Photo Gallery Demo #1</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="fancybox.js"></script>

<link href="images/fancybox.css" rel="stylesheet" type="text/css"> 
<link href="../photoGallery.css" rel="stylesheet" type="text/css">

<script type="text/javascript">

$('html').addClass('js-on');
/* Fire Fancybox */
$(document).ready(function() {
    $("a").fancybox({
    'titleFormat':function(itemTitle, itemArray, itemIndex, itemOpts) {
                  return itemTitle + '<span> Image ' + (itemIndex + 1) + ' of ' + itemArray.length + '</span>';
                }
    });
}); 
</script>

</head>

<body>

<h1>Prote(C#)tion Photo Gallery</h1>

<div id="gallery">
<a href="../SlideShow/mainPage.png" rel="gallery" title="Authentication Page."><img src="../SlideShow/mainPage.png" alt="" id="first"><span></span></a>
<a href="../SlideShow/importSettings.png" rel="gallery" title="Import any previously saved settings."><img src="../SlideShow/importSettings.png" alt=""></a>

</div>

</body>

</html>

我对专家的最后一个问题！： 如何组合文档1和文档2的两个标题？这些标题脚本需要以某种方式组合，我相信这是我的问题所在。

Answer 1

在查看你的htmls时，似乎web服务器文件系统中两个文件的位置不同。例如，fancybox.js在第二个html中被直接引用，而它应该被版本化并且在第一个html中的不同位置。为什么不显示结果html，你合并的html？

将这两个HTML + JQuery Scripts页面合并为一个

1 个答案: