Справочная информация:
Я создаю веб-сайт с помощью Intuit Web Designs. Они имеют, на мой взгляд, очень странную настройку HTML, которая заключается в следующем. Интуитивно позволяет мне добавить поле HTML (для вставки кода HTML). Однако сайт требует, чтобы я вставил что-либо в теги <head></head> в отдельном поле, расположенном на боковой стороне страницы.
Что я пытаюсь сделать:
У меня есть два полнофункциональных скрипта jQuery - каждый написан в отдельных документах. Я загрузил HTML из одного документа в инструмент HTML внутри Intuit. Затем я загрузил скрипты jQuery в специальное поле заголовков в Intuit. Все работало отлично.
Теперь пришло время добавить второй документ (HTML и jQuery еще раз), так как я хотел, чтобы оба документа работали на одной странице. HTML-файл загружен нормально, но как только я объединяю второй скрипт jQuery с первым скриптом jQuery, консоль Chrome начинает сообщать мне, что в JQuery Script # 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? Эти сценарии заголовков нужно как-то комбинировать, я считаю, что именно здесь моя проблема.