我已经搜索了这个问题的答案并发现了类似的问题,但我似乎没有足够的知识可以将解决方案转化为修复我的问题。
我正在使用jQuery选项卡处理页面,您可以将鼠标悬停在选项卡上,它会更改选项卡下方的内容。我已经在我测试的所有浏览器中使用它。问题是我希望标签是可点击的链接。当我将href放入锚标签时,鼠标悬停不再适用于Firefox,但在其他浏览器中也是如此。如果我有一个没有href的锚,它可以在Firefox中使用。我尝试使用FireBug和FireQuery进行调试,但无法弄明白。
我正在使用jQuery工具1.6.4和FireFox 10.0.2
我这里有一个工作页面,其中包含一个带网址的示例,以及一个不带示例的示例: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-->
感谢您的帮助。