Повторное событие JQuery повторяется ... иногда

Question

У меня возникает странная (раздражающая) проблема с небольшим дополнением jquery. Я кодирую. Он предназначен для управления небольшой вкладкой nav для контента на странице, это не должно быть большой проблемой. В настоящее время в нем есть 3 кнопки (вкладки), и система предназначена для постепенного исчезновения текущей вкладки и содержимого и перехода на новую, когда вы нажимаете на любую из вкладок.

jsfiddle

HTML, выглядит следующим образом:

  <div class="fixed-wing-nav-cont"> 
       <div class="fixed-wing-nav"> 
        <div class="fixed-wing-nav-item" id="wing-nav-1">Features</div> 
        <div class="fixed-wing-nav-item" id="wing-nav-2">Benefits</div> 
        <div class="fixed-wing-nav-item active" id="wing-nav-3">Screenshots</div> 
       </div> 
      </div> 

      <div class="fixed-wing-tab-cont"> 
       <div id="fixed-wing-tab-1"> 
        Features Tab 
       </div> 
       <div id="fixed-wing-tab-2"> 
        Benefits Tab 
       </div> 
       <div id="fixed-wing-tab-3" class="active"> 
        <img src="images/screens.png" alt="screens" /> <a href="#" class="red">VIEW ALL</a> 
       </div> 
       <div class="clear"></div> 
      </div> 

И CSS привязаны к нему, только в случае, если это может быть важным, является следующее:

.fixed-wing-nav-cont{ 
    width:100%; 
    border-bottom:1px solid #747474; 
    margin:20px 0; 
} 

.fixed-wing-nav{ 
    display:table; 
    border-spacing:5px 0; 
    border-collapse:separate; 
    margin-left:-5px; 
} 

.fixed-wing-nav-item{ 
    margin-right:40px; 
    height:40px; 
    color:#1c5fa9; 
    font-size:16px; 
    border-left:1px solid #1c5fa9; 
    border-top:1px solid #1c5fa9; 
    border-right:1px solid #1c5fa9; 
    text-align:center; 
    padding:0 10px; 
    display:table-cell; 
    vertical-align:middle; 
    cursor:pointer; 
} 

.fixed-wing-nav-item.active{ 
    color:#fff; 
    background-color:#1c5fa9; 
} 

.fixed-wing-tab-cont{ 
    position:relative; 
    width:100%; 
    height:400px; 
} 

.fixed-wing-tab-cont>div{ 
    position:absolute; 
    top:0px; 
    left:0px; 
    width:100%; 
    height:400px; 
    overflow:hidden; 
    display:none; 
} 

.fixed-wing-tab-cont>div.active{ 
    display:block; 
} 

.fixed-wing-tab-cont img{ 
    border:none; 
} 

Jquery дополнение очень простое - я знаю, что есть более элегантные способы сделать это, но я решил пойти на то, что должно быть быстрее для кода, и проще в целом:

<script type="text/javascript"> 
$('#wing-nav-1').click(function(){ 
    $('div.fixed-wing-nav-item').removeClass("active",function(){ 
     $('#wing-nav-1').addClass("active"); 
    }); 
    $('#fixed-wing-tab-3').removeClass("active"); 
    $('.fixed-wing-tab-cont>div').fadeOut("fast",function(){ 
     $('#fixed-wing-tab-1').fadeIn("fast"); 
    }); 
}); 

$('#wing-nav-2').click(function(){ 
    $('div.fixed-wing-nav-item').removeClass("active",function(){ 
     $('#wing-nav-2').addClass("active"); 
    }); 
    $('#fixed-wing-tab-3').removeClass("active"); 
    $('.fixed-wing-tab-cont>div').fadeOut("fast",function(){ 
     $('#fixed-wing-tab-2').fadeIn("fast"); 
    }); 
}); 

$('#wing-nav-3').click(function(){ 
    $('div.fixed-wing-nav-item').removeClass("active",function(){ 
     $('#wing-nav-3').addClass("active"); 
    }); 
    $('#fixed-wing-tab-3').removeClass("active"); 
    $('.fixed-wing-tab-cont>div').fadeOut("fast",function(){ 
     $('#fixed-wing-tab-3').fadeIn("fast"); 
    }); 
}); 

</script> 

Я загружаю Jquery 1.9 прямо с сайта jquery. Теперь проблема заключается в следующем: страница открывается с загруженной третьей вкладкой, без проблем. Если я нахожусь на первой вкладке, она отлично работает: третья вкладка исчезает, первая затухает, а «активное» состояние с кнопки вкладки перемещается с третьей на первую. Если я затем перейду на вторую вкладку, она также отлично работает. Однако, если я попытаюсь перейти с любой вкладки на третью или с третьей на вторую, она дважды воспроизведет анимацию, что не имеет никакого смысла: все три вкладки работают с одним и тем же кодом. Я просматривал код снова и снова в течение часа, и я не понимаю, почему это происходит. Почему первая вкладка работает отлично, а третья имеет такие проблемы? Я попытался удалить «активное» состояние из всех элементов в HTML (таким образом, запуск закладки/содержимого пуст), и проблема все еще происходит.

Может ли кто-нибудь помочь мне здесь? Это просто не имеет для меня никакого смысла: \

Answer 1

Вы угасали все свои DIV под классом .fixed-wing-tab-cont. Таким образом, загрузка контента в два раза на самом деле просто исчезла и снова исчезла. Вы можете исключить DIV с активным классом, используя селектор CSS 'not' в jQuery. Изменение

$('#wing-nav-3').click(function(){ 
    $('div.fixed-wing-nav-item').removeClass("active",function(){ 
     $('#wing-nav-3').addClass("active"); 
    }); 
    $('#fixed-wing-tab-3').removeClass("active"); 
    $('.fixed-wing-tab-cont>div').fadeOut("fast",function(){ 
     $('#fixed-wing-tab-3').fadeIn("fast"); 
    }); 
}); 

в

$('#wing-nav-3').click(function(){ 
    $('div.fixed-wing-nav-item').removeClass("active"); 
    $('#wing-nav-3').addClass("active"); 
    $('#fixed-wing-tab-3').removeClass("active"); 
    $('.fixed-wing-tab-cont>div:not(.active)').fadeOut("fast"); 
    $('#fixed-wing-tab-3').fadeIn("fast"); 
}); 

Там действительно нет необходимости использовать функции обратного вызова в данном случае. Фактически, метод removeClass не имеет возможности обратного вызова. Возможно, вы заметили, что ваш активный класс вкладки не применялся к вкладкам, на которые вы нажали, из-за этого.

Updated jsFiddle

Answer 2

Вы удаляете «активный» класс из делянок с фиксированным навигационным элементом правильно, но всегда удаляете «активный» класс из «# fixed-wing- tab-3 ', независимо от того, какая из вкладок активна. Если вы удалили «активный» класс из «.fixed-wing-tab-cont> div», а затем добавили «активный» класс на фиксированный флажок, который вы должны сделать fadeIn, он должен работать.