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/

修改

更新了小提琴，以便将父母与li匹配：http://jsfiddle.net/vXmNU/2/

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

Answer 2

几乎烧了我的头后：

尝试注释掉所有console.log事件。我在虚拟机中运行IE8，如果我有任何console.log事件触发，javascript将停止工作。它不会在console.log之后运行任何其他javascript代码。

所以：尝试注释/删除所有console.log - 这是一个IE8 Bug，因为之前有过alert（）;调试事情。

深入挖掘：What happened to console.log in IE8?（感谢kamui）

Answer 3

此代码片段基于您的jsfiddle演示，但改进了CSS和JS。我没有IE8，所以请自行尝试，并在评论中告诉我。

编辑：我自己测试过。它在IE8中工作。但也许你需要点击“允许阻止的内容”在你的页面上运行JS。

Series

// 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;
}