jQuery add and remove classes not working IE8

问题

I am not the greatest at jQuery so forgive me if this is a simple question. I have created a nav menu active state function Click here for the demo

It works fine in Chrome, Firefox, Safari, however I notice in IE8 the class active is not appearing when I click on the links. Is there something incorrect in my jQuery?

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

回答1:

I don't have a working version of IE8 (the horror!).. But since your "this" is already the button you're clicking on, why not change the last line to this:

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

As seen here (like I said: can not test it) : http://jsfiddle.net/vXmNU/1/

EDIT

Updated the fiddle to match the parent to the li: http://jsfiddle.net/vXmNU/2/

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

回答2:

After almost burning my head down:

Try to comment out all console.log Events. I'm running IE8 in a Virtual Machine and if i have any console.log Event triggered, the javascript will stop working. It will not run any other javascript code after the console.log.

So: Try to comment out / remove all console.log - It's a IE8 Bug, because earlier there was alert(); to debug things.

for digging deeper: What happened to console.log in IE8? (thanks to kamui)

回答3:

This code snippet is based on your jsfiddle demo, but with sligtly improved CSS and JS. I dont have IE8, so try it on your own and let me know in comment.

Edit: I tested it myself. Its working in IE8. But maybe you will need click on "Allow blocked content" to run JS on your page.

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

来源：https://stackoverflow.com/questions/18893361/jquery-add-and-remove-classes-not-working-ie8

标签

javascript

jquery

internet-explorer-8