使用链接的JQuery标签鼠标悬停在IE中工作,但不适用于Firefox

时间:2012-02-24 22:35:55

标签: jquery firefox tabs mouseover

我已经搜索了这个问题的答案并发现了类似的问题,但我似乎没有足够的知识可以将解决方案转化为修复我的问题。

我正在使用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-->

感谢您的帮助。

0 个答案:

没有答案