Я искал ответ на эту проблему и обнаружил похожие проблемы, но мне кажется, что я не обладаю достаточными знаниями, чтобы перевести решения в решение моей проблемы.
Я работаю надстраница с использованием вкладок jQuery, где вы наводите курсор мыши на вкладку, и она меняет содержимое под вкладкой.Он работает во всех браузерах, в которых я тестировал. Проблема в том, что я хочу, чтобы на вкладках были кликабельные ссылки.Когда я помещаю href в тег anchor, наведение мыши больше не работает в Firefox, но работает в других браузерах.Если у меня есть якорь без HREF, он работает в Firefox.Я попытался отладить с помощью FireBug и FireQuery, но не смог понять.
Я использую инструменты jQuery 1.6.4 и FireFox 10.0.2
У меня есть рабочая страницапример с URL-адресами и пример без: http://www.vietnam.ttu.edu/test/redesign5/test.php
Вот код, который я использую:
<head>
<script type="text/javascript">
$(document).ready(function(){
$("#tab1Titles").tabs("div.tabContent1", {event:'mouseover'});
$(".tab1Titles").hover(function() {
$(".tab1Titles").removeClass('active');
$(this).addClass("active");
});
return false;
});
</script>
</head>
<div class="contentBlock round transparent" id="block2">
<div class="tabs">
<ul id="tab1Titles">
<li class="tab1Titles active"><a>News</a></li>
<li class="tab1Titles"><a>Calendar</a></li>
<li class="tab1Titles"><a>Conferences</a></li>
<li class="tab1Titles"><a>Follow Us</a></li>
</ul>
</div><!--.tabs-->
<!--panels-->
<div class="tabContent tabContent1"><!--News and Updates-->
<div class="tabSelected tab1"></div>
<div class="tabSelectedBar"></div>
<div class="tabBody">Content of Tab 1, no url<br/>works in IE and Firefox</div>
</div><!--.tabContent-->
<div class="tabContent tabContent1"><!--News and Updates-->
<div class="tabSelected tab2"></div>
<div class="tabSelectedBar"></div>
<div class="tabBody">Content of Tab 2</div>
</div><!--.tabContent-->
<div class="tabContent tabContent1"><!--News and Updates-->
<div class="tabSelected tab3"></div>
<div class="tabSelectedBar"></div>
<div class="tabBody">Content of Tab 3</div>
</div><!--.tabContent-->
<div class="tabContent tabContent1"><!--News and Updates-->
<div class="tabSelected tab4"></div>
<div class="tabSelectedBar"></div>
<div class="tabBody">Content of Tab 4</div>
</div><!--.tabContent-->
<!--end of panels-->
</div><!--#block2-->
Спасибо за помощь.