必須點擊圖像兩次功能才能正常工作

此代碼很好，除了一件事，我不明白爲什麼它搞砸了。對於頂部圖片或「＃個人保險」，我必須點擊兩次以使功能發生。這只是您第一次使用該功能。如果點擊了其他ID中的任何一個，「#businessinsurance」或「#assetpreservation」，則該功能在第一次點擊時起作用。當一個「insurtypes」圖像被點擊時，這個功能只會讓div出現在div「#insurpic」中。所以我的問題是，我能做些什麼才能使它在第一次點擊上工作？必須點擊圖像兩次功能才能正常工作

另外，有什麼我可以改變，使div顯示多一點...恩典？看起來，它會很好，如果它滑入或像這樣酷！但實際上，我只是需要第一個問題的幫助，如果你幫助我解決這個問題，那麼你就更酷了！

鏈接到網站，如代碼用於Website

下面是HTML和jQuery。

HTML

<div id="insurtypes"> <a href='#personalinsurnace'> 
    <img src="img/personal_insurance.png" /> 
    </a> <a href='#businessinsurance'> 
    <img src="img/business_insurance.png" /> 
    </a> 
<a href='#assetpereservation'> 
    <img src="img/asset_preservation.png" /> 
    </a> 

</div> 
<div id="insurpic"> 
    <div id="personalinsurnace"><b>Personal Insurance Services</b> 
     <br />choose the service you are interested in! 
     <ul> 
      <li></li> 
     </ul> 
    </div> 
    <div id="businessinsurance"><b>Business Insurance Services</b> 
     <br />choose the service you are interested in! 
     <ul> 
      <li></li> 
     </ul> 
    </div> 
    <div id="assetpereservation"><b>Asset Preservation Services</b> 
     <br />choose the service you are interested in! 
     <ul> 
      <li></li> 
     </ul> 
    </div> 
</div>

jQuery的

$('#insurtypes').each(function() { 

    var $active, $content, $links = $(this).find('a'); 

    $active = $($links.filter('[href="' + location.hash + '"]')[0] || $links[0]); 
    $active.addClass('active'); 
    $content = $($active.attr('href')); 

    $links.not($active).each(function() { 
     $($(this).attr('href')).hide(); 
    }); 

    $(this).on('click', 'a', function (e) { 

     if ($(this).is('.active')) { 
      $('.active').removeClass('active'); 
      $content.hide(); 
     } else { 
      $('.active').removeClass('active'); 
      $content.hide(); 
      $active = $(this); 
      $content = $($(this).attr('href')); 

      $active.addClass('active'); 
      $content.show(); 

      e.preventDefault(); 
     } 
    }); 
});

來源

2013-12-12 Glenn V.

運行沒有問題的最後一行[jsfiddle]（http://jsfiddle.net/FEJJ9/） –

似乎在加載時，一切都設置爲活動狀態，然後單擊它隱藏它。什麼不起作用？ – Fydo

我需要提供更多信息嗎？我知道它在網站上無法正常工作。那麼問題可以用CSS呢？所有3個「不足類型」都使用相同的css減色。 –

您必須添加e.preventDefault()的click事件開始之後。

在click事件之後添加右：

$(this).on('click', 'a', function (e) {

全碼：

$('#insurtypes').each(function() { 

    var $active, $content, $links = $(this).find('a'); 

    $active = $($links.filter('[href="' + location.hash + '"]')[0] || $links[0]); 
    $active.addClass('active'); 
    $content = $($active.attr('href')); 

    $links.not($active).each(function() { 
     $($(this).attr('href')).hide(); 
    }); 

    $(this).on('click', 'a', function (e) { 
     e.preventDefault(); 
     if ($(this).is('.active')) { 
      $('.active').removeClass('active'); 
      $content.hide(); 
     } else { 
      $('.active').removeClass('active'); 
      $content.hide(); 
      $active = $(this); 
      $content = $($(this).attr('href')); 

      $active.addClass('active'); 
      $content.show(); 
     } 
    }); 
});

並確保您刪除e.preventDefault();事件功能

來源

2013-12-12 16:28:44

不幸的是，我仍然需要點擊兩次頂部圖片才能使用該功能，即使您對代碼所做的更改也是如此。 –

必須點擊圖像兩次功能才能正常工作

回答

相關問題