jQuery添加和删除不工作IE8的类 [英] jQuery add and remove classes not working IE8

问题描述

我不是jQuery中最伟大的，所以如果这是一个简单的问题请原谅我。我创建了一个导航菜单活动状态函数

  // JavaScript代码$（function（）{$（'。proBtn'）。 （'click'，function（）{$（'。active'）。removeClass（'active'）; $（this）.parent（）。addClass（'active'）;}）;}）;  

  / * CSS code * / body {background：＃e8e8e8; } ul {margin：0;填充：0; list-style：none; } ul：after {content：;显示：块;明确：两者; } ul li {float：left;宽度：16.66％; } ul li a：hover，ul .active a {background：#fff;颜色：＃1d5ea8; } ul li a {display：block; text-decoration：none; font-family：helvetica，sans-serif; font-weight：bold;颜色：＃6a6f75; font-size：12px; text-align：center;填充：10px 0; border-radius：4px;过渡：所有0.4s;}  

 <！ - HTML代码 - >< div id =wrapper> < div class =top-block> < UL> < li class =active>< a href =＃class =proBtn>主页< / a>< / li> < li>< a href =＃class =proBtn>编辑个人资料< / a>< / li> < li>< a href =＃class =proBtn> Like'd< / a>< / li> < li>< a href =＃class =proBtn>列出< / a>< / li> < li>< a href =＃class =proBtn>关注者< / a>< / li> < li>< a href =＃class =proBtn>关注< / a>< / li> < / UL> < / div>< / div>< script src =https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js>< / script>  

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');
    });
});

解决方案

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>

这篇关于jQuery添加和删除不工作IE8的类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！