Здраствуйте! Возникла проблема (подозреваю, что конфликт библиотек jQuery).
Пишу сайт, где на странице есть список, и при клике на элемент списка с помощью AJAX под списком вставляется страница. По умолчанию страница, которую вызывает первый элемент списка - актвиен, тоесть сразу есть под списком (
подробное описание плагина). Проблема состоит в следующем: при вызове другой страницы старая не убирается (как это должно быть), а появляется под другой, при чем библиотека jQuery на ней не работает вообще (в странице, которая по умолчанию автоматически вызывается все работает корректно). На подключаемых страницах библиотека нужна для создания вертикальных вкладок.
Подключаемые библиотеки: jQuery UI (на главной), на подключаемых - пользовательская библиотека от Google.
Библиотеки писали вроде не Шарашкины конторы, так что думаю, что проблема не в коде))
Подскажите, в чем может быть проблема и как ее лучше решить.
Заранее примного благодарен.
Собственно сам код главной страницы:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Главная страница</title>
<script type="text/javascript" src="jquery-latest.min.js"></script>
<script type="text/javascript" src="jqueryui.custom.js"></script>
<link type="text/css" href="style.css" rel="stylesheet" />
<!--AJAX jQuery script start here-->
<script>
$(function(){
$( "#tabs" ).tabs({
ajaxOptions:{
error: function( xhr, status, index, anchor ) {
$( anchor.hash ).html("Содержимое не найдено :(");
}
}
});
});
</script>
<!--AJAX jQuery script end here-->
</head>
<body>
<div id="tabs">
<ul class="tabs">
<li><a href="pages/page-1.html">Страница 1</a></li>
<li><a href="pages/page-2.html">Страница 2</a></li>
<li><a href="pages/page-3.html">Страница 3</a></li>
<li><a href="pages/page-4.html">Страница 4</a></li>
</ul>
</div>
</body>
И подключаемых (все страницы имеют одинаковый шаблон, только разный контент):
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var $items = $('#vtab>ul>li');
$items.mouseover(function() {
$items.removeClass('selected');
$(this).addClass('selected');
var index = $items.index($(this));
$('#vtab>div').hide().eq(index).show();
}).eq(0).mouseover();
});
</script>
</head>
<body>
<div id="vtab">
<ul>
<li class="selected">Вкладка 1</li>
<li class="">Вкладка 2</li>
<li class="">Вкладка 3</li>
</ul>
<div>Контент вкладки 1</div>
<div>Контент вкладки 2</div>
<div>Контент вкладки 3</div>
</body>