IE7不会遵循JQuery链接

时间:2012-03-27 02:24:14

标签: jquery navigation

IE7不会遵循页面底部的JQuery链接“抵押品”和“品牌”。它在其他版本和浏览器中转换得很好。 这是我的JQuery文件的代码:

    $(function () {
    $('#navWeb').click(function() {
        $('.branding, .collateralT').hide();
        $('.webT').fadeIn();
    });
    $('#navCollateral').click(function() {
        $('.webT, .branding').hide();
        $('.collateralT').fadeIn();
    });
    $('#navBranding').click(function() {
        $('.webT, ul.collateralT').hide();
        $('.branding').fadeIn();
    });
});

这是HTML:

<div id="container">
          <nav id="menu">
                <section id="contact">
                    240 481 6963<br>
                    <a href="mailto:y.podlesny@gmail.com">y.podlesny@gmail.com</a>
                 </section>
                <section id="resume"><a href="files/yuliyaPodlesnyResume.pdf" target="_blank" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('resume','','img/resumeON.jpg',1)"><img src="img/resumeOFF.jpg" alt="resume" name="resume" width="190" height="32" border="0"></a></section>
                <section id="portfolioMenu">
                    <a href="#" id="navWeb" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('web','','img/webON.jpg',1)"><img src="img/webOFF.jpg" alt="web" name="web" width="85" height="47" border="0"></a>
                    <a href="#" id="navCollateral" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('collateralOFF','','img/collateralON.jpg',1)"><img src="img/collateralOFF.jpg" alt="commateral material" name="collateralOFF" width="190" height="56" border="0"></a>
                    <a href="#" id="navBranding" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('branding','','img/brandingON.jpg',1)" onClick="getElementById('brandingThumbs')"><img src="img/brandingOFF.jpg" alt="Branding" name="branding" width="190" height="53" border="0"></a>
                </section>
         </nav>
            <section id="slideshow">
                <div id="fadeBlock">
                    <a class="fancybox" rel="group" href="img/thisWeekInWashLong.jpg" id="largeImgClicker"><img src="img/thisWeekInWash.jpg" alt="Large image" id="largeImg" popupimg="img/thisWeekInWashLong.jpg" /></a>
                </div>
                <h2>This Week In Washington</h2>
                  <div class="sc_menu">
                    <ul class="webT" id="webThumbs" input type="image" value="Go">
                      <li><a href="img/thisWeekInWash.jpg" popupimg="img/thisWeekInWashLong.jpg" id="This Week In Washington" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('thisWeekInWash','','img/keyContactThumbON.jpg',1)"><img src="img/keyContactThumbBlur.jpg" alt="This Week In Wash Newsletter" name="thisWeekInWash" width="126" height="82" border="0"></a></li>
                      <li><a href="img/caissons.jpg" popupimg="img/caissonsLong.jpg" id="Caisson Case Study Discussion Forum" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('caissons','','img/caissonsThumbON.jpg',1)"><img src="img/caissonsThumbBlur.jpg" name="caissons" width="126" height="82" border="0"></a></li>
                      <li><a href="img/asceSite.jpg" popupimg="img/asceSiteLong.jpg" id="ASCE Home Page" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('asceHomePage','','img/asceWebThumbON.jpg',1)"><img src="img/asceWebThumbBlur.jpg" alt="ASCE Home Page" name="asceHomePage" width="126" height="82"/></a></li>
                      <li><a href="img/sustainability.jpg" id="ASCE Committee on Sustainability Site" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('sustainability','','img/sustainabilityThumbON.jpg',1)"><img src="img/sustainabilityThumbBlur.jpg" name="sustainability" alt="ASCE Committee on Sustainability"  width="126" height="82"/></a></li>
                    </ul>
                    <ul class="webT" id="webThumbs2" input type="image" value="Go">
                      <li><a href="img/outreach.jpg" popupimg="img/outreachEnewsLong.jpg" id="Pre-College Outreach" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('outreach','','img/outreachThumbON.jpg',1)"><img src="img/outreachThumbBlur.jpg" alt="Pre-College Outreach" name="outreach" width="126" height="82" border="0"></a></li>
                      <li><a href="img/craneSafety.jpg" popupimg="img/craneSafetyLong.jpg" id="Crane Safety Training Site" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('craneSafety','','img/craneThumbON.jpg',1)"><img src="img/craneThumbBlur.jpg" alt="Crane Safety Training Site" name="craneSafety" width="126" height="82" border="0"></a></li>
                      <li><a href="img/symposium.jpg" id="Aging Buildings Symposium" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('symposium','','img/symposThumbON.jpg',1)"><img src="img/symposThumbBlur.jpg" alt="symposium" name="symposium" width="126" height="82" border="0"></a></li>
                   </ul>
                    <ul class="collateralT" id="print" input type="image" value="Go">
                      <li><a href="img/mixAnnRep.jpg" id="Mix Annual Report" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('mixAnnRep','','img/mixAnnRepThumbON.jpg',1)"><img src="img/mixAnnRepThumbBlur.jpg" alt="Mix Annual Report" name="mixAnnRep" width="126" height="82" border="0"></a></li>
                      <li><a href="img/stPoster.jpg" popupimg="img/stPosterLong.gif" id="Student Membership Poster" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('stPoster','','img/stPosterThumbON.jpg',1)"><img src="img/stPosterThumbBlur.jpg" alt="Student Membership Poster" name="stPoster" width="126" height="82" border="0"></a></li>
                      <li><a href="img/otc.jpg" id="OTC Hall Of Fame Program" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('otc','','img/otcThumbOn.jpg',1)"><img src="img/otcThumbBlur.jpg" alt="OTC Hall Of Fame Program" name="otc" width="126" height="82" border="0"></a></li>
                      <li><a href="img/stBrochure.jpg" id="ASCE Student Brochure" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('stBrochureStudent B','','img/stBrochureThumbON.jpg',1)"><img src="img/stBrochureThumbBlur.jpg" alt="ASCE Student Brochure" name="stBrochureStudent B" width="126" height="82" border="0"></a></li>
                      <li><a href="img/mixStand.jpg" popupimg="img/mixStandLong.jpg" id="Art Directed &mdash; MIX Exhibition Stand " onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image26','','img/mixStandThumbBlur.jpg',1)"><img src="img/mixStandThumbOn.jpg" alt="MIX Exhibition Stand" name="Image26" width="126" height="82" border="0"></a></li>
<!--                  <li><a href="img/asceMembershipAd.jpg" id="ASCE Student Membership Ad" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('asceMembershipAd','','img/asceMembershipAdThumb.jpg',1)" onClick="fade('fadeBlock');"><img src="img/asceMembershipAdON.jpg" alt="ASCE Student Membership Ad" name="asceMembershipAd" width="126" height="82" border="0"></a></li>-->
                    </ul>
                    <ul class="collateralT" input type="image" value="Go">
                      <li><a href="img/keyContact.jpg" id="Key Contact Promotional Package" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('keyContact','','img/keyContactPrintThumbON.jpg',1)"><img src="img/keyContactPrintThumbBlur.jpg" alt="Key Contact Promotional Package" name="keyContact" width="126" height="82" border="0"></a></li>
                      <li><a href="img/chocolatStand.jpg" id="ChocolatFL Exibition Stand" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('chocolatFL','','img/chocolatflThumbON.jpg',1)"><img src="img/chocolatflThumbBlur.jpg" alt="ChocolatFL Exibition Both" name="chocolatFL" width="126" height="82" border="0"></a></li>
                      <li><a href="img/insa.jpg" id="INSA Folder With Letterhead" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('insa','','img/insaThumbON.gif',1)"><img src="img/insaThumbBlur.jpg" alt="INSA Folder With Letterhead" name="insa" width="126" height="82" border="0"></a></li>
                      <li><a href="img/tribe.jpg" popupimg="img/tribeLong.gif" id="Indian Tribes Exhibition Stands " onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('tribe','','img/tribeThumbON.jpg',1)"><img src="img/tribeThumbBlur.jpg" alt="Indian Tribes Exhibition Stands" name="tribe" width="126" height="82" border="0"></a></li>
                    </ul>
                    <ul class="branding" input type="image" value="Go">
                      <li><a href="img/clarksFarm.gif" id="Clark's Farm Logo" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('farm','','img/farmThumbON.gif',1)"><img src="img/farmThumbBlur.jpg" alt="Clark's Farm " name="farm" width="126" height="82" border="0"></a></li>
                      <li><a href="img/failingInfr.gif" id="Our Critical Infrastructure Logo" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('infr','','img/infrThumbON.gif',1)"><img src="img/infrThumbBlur.jpg" alt="Our Critical Infrastructure Logo" name="infr" width="126" height="82" border="0"></a></li>
                      <li><a href="img/waterRes.gif" id="Water Resources Coalition Logo" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('water','','img/waterResThumbON.gif',1)"><img src="img/waterResThumbBlur.jpg" alt="Water Resources Coalition" name="water" width="126" height="82" border="0"></a></li>
                      <li><a href="img/bas.gif" id="Bounds Appraisal Services Logo" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('bas','','img/basThumbsON.gif',1)"><img src="img/basThumbsBlur.jpg" alt="Bounds Appraisal Services" name="bas" width="126" height="82" border="0"></a></li>
                    </ul>
                    <ul class="branding">
                      <li><a href="img/jc.gif" id="Job Continent Logo" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('jc','','img/jcThumbON.gif',1)"><img src="img/jcThumbBlur.jpg" alt="Job Continent Logo" name="jc" width="126" height="82" border="0"></a></li>
                    </ul>
              </div>
            </section>
</div>
    enter code here

1 个答案:

答案 0 :(得分:0)

有几个人报告了IE7中的问题,并且大多数都与使用jQuery的document.ready功能的方式有关。 IE有不同的行为。尝试更改JS代码:

$(function () {
 $('#navWeb').click(function() {
     $('.branding, .collateralT').hide();
     $('.webT').fadeIn();
 });
 $('#navCollateral').click(function() {
     $('.webT, .branding').hide();
     $('.collateralT').fadeIn();
 });
 $('#navBranding').click(function() {
     $('.webT, ul.collateralT').hide();
     $('.branding').fadeIn();
 });
});

要:

$(document).ready( function () {
  myInit();
});

function myInit() {
 $('#navWeb').click(function() {
     $('.branding, .collateralT').hide();
     $('.webT').fadeIn();
 });
 $('#navCollateral').click(function() {
     $('.webT, .branding').hide();
     $('.collateralT').fadeIn();
 });
 $('#navBranding').click(function() {
     $('.webT, ul.collateralT').hide();
     $('.branding').fadeIn();
 });
}