jQuery добавить и удалить классы, не работающие IE8

Question

Я не самый большой в jQuery, так что простите меня, если это простой вопрос. Я создал функцию активного состояния навигационного меню Click here for the demo

Он отлично работает в Chrome, Firefox, Safari, однако я заметил, что в IE8 класс active не появляется, когда я нажимаю ссылки. В моем jQuery есть что-то неправильное? (! Ужас)

$(document).ready(function() { 
    $('.proBtn').click(function() { 
     $('li').removeClass('active'); 
     $('li a').removeClass('blue'); 
     $(this).parent().addClass('active'); 
     $(this).parent().children('.proBtn').addClass('blue'); 
    }); 
}); 

Answer 1

У меня нет рабочей версии IE8 .. Но так как ваш «это» уже кнопка вы щелкаете на, почему бы не изменить последнюю строку следующим образом:

   $(this).addClass('blue'); 

Как видно здесь (как я сказал: не могу проверить это): http://jsfiddle.net/vXmNU/1/

EDIT

Обновлено скрипку, чтобы соответствовать пар лор на Li: http://jsfiddle.net/vXmNU/2/

$(this).parent("li").addClass('active'); 

Answer 2

После почти сжигая мою голову:

Попробуйте закомментировать все console.log события. Я запускаю IE8 на виртуальной машине, и если у меня возникнет событие console.log, javascript перестанет работать. После console.log он не будет запускать какой-либо другой код javascript.

So: Попробуйте прокомментировать/удалить все console.log - Это ошибка IE8, потому что раньше было alert(); отлаживать вещи.

рыть глубже: What happened to console.log in IE8? (благодаря Камуи)

Answer 3

Этот фрагмент кода основан на вашем jsfiddle демо, но с улучшенной sligtly CSS и JS. У меня нет IE8, поэтому попробуйте сами и дайте мне знать в комментарии.

Редактировать: Я сам тестировал. Он работает в IE8. Но, возможно, вам понадобится нажать «Разрешить заблокированный контент», чтобы запустить JS на вашей странице.

// JavaScript code 
 

 
$(function() { 
 
    $('.proBtn').on('click', function() { 
 
    $('.active').removeClass('active'); 
 
    $(this).parent().addClass('active'); 
 
    }); 
 
});

/* CSS code */ 
 

 
body { background: #e8e8e8; } 
 
ul { margin: 0; padding: 0; list-style: none; } 
 
ul:after { content: ""; display: block; clear: both; } 
 
ul li { float: left; width: 16.66%; } 
 
ul li a:hover, ul .active a { background: #fff; color: #1d5ea8; } 
 
ul li a { 
 
    display: block; 
 
    text-decoration: none; 
 
    font-family: helvetica, sans-serif; 
 
    font-weight: bold; 
 
    color: #6a6f75; 
 
    font-size: 12px; 
 
    text-align: center; 
 
    padding: 10px 0; 
 
    border-radius: 4px; 
 
    transition: all 0.4s; 
 
}

<!-- HTML code --> 
 

 
<div id="wrapper"> 
 
    <div class="top-block"> 
 
    <ul> 
 
     <li class="active"><a href="#" class="proBtn">Home</a></li> 
 
     <li><a href="#" class="proBtn">Edit Profile</a></li> 
 
     <li><a href="#" class="proBtn">Like'd</a></li> 
 
     <li><a href="#" class="proBtn">Lists</a></li> 
 
     <li><a href="#" class="proBtn">Followers</a></li> 
 
     <li><a href="#" class="proBtn">Following</a></li> 
 
    </ul> 
 
    </div> 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>