.removeAttr（'style'）似乎在ipad上没有像预期的那样工作

Question

Do anyone know why the CSS doesn't update on ipad if you use .removeAttr('style') ?

Here's a quick example to show how I implemented my sprite switching:

CSS

nav li a { background: url('../img/sprites.gif'); }
nav li a#pizza { background-position: -40px -42px; }
nav li a#beer { background-position: -40px -82px; }
nav li a#spagetti { background-position: -40px -122px; }

Javascript

var $arr_nav_elements = $('nav li a');
$('nav li a').on('click', function(event) {
   //works fine on all modern browsers except ipad!
   $arr_nav_elements.removeAttr('style');

   var $arr_bg_pos = $(this).css('backgroundPosition').split(" ");
   //create "active" state on the current button  
   $(this).css('backgroundPosition', '0 '+$arr_bg_pos[1]); 
}

In the example above my button will change to the "active" state in my sprites.gif at first click, however the inline style applied by jQuery's css() won't be removed/updated on ipad after I click on any different buttons.

Any ideas?

Answer 1

Seems as if .removeAttr('style'); has some issues on ipad (prob. all ios devices)

As pointed out by A. Wolff and ᾠῗᵲᄐᶌ these alternatives work fine:

.attr('style','');
.css('backgroundPosition','');

Answer 2

hope this helps:

try something like this:

//replace the $.each(...) block with following
$('nav li a').each(function(){
    $(this).css('name','value'); //here you manually adjust your css styles
});

good luck in your project!