Нужно дважды щелкнуть изображение для работы функции

Question

Этот код отлично работает, за исключением одной вещи, и я не могу понять, почему это испортится. Для верхнего изображения или «#personalinsurance» я должен дважды щелкнуть его, чтобы функция выполнялась. Это только в первый раз, когда вы используете эту функцию. Если щелкнуть любой из других идентификаторов, «#businessinsurance» или «#assetpreservation», функция работает при первом щелчке. Эта функция просто заставляет div отображаться в div «#insurpic» при нажатии одного из изображений «insurtypes». Итак, мой вопрос: что я могу сделать, чтобы он работал над первым щелчком?

Кроме того, есть ли что-то, что я могу изменить, чтобы сделать 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(); 
     } 
    }); 
}); 

Answer 1

Вы должны добавить e.preventDefault() сразу после запуска 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(); в последней строке функции события