Правильный способ отображения состояния нажатия кнопки в меню навигации приложения html5/phonegap в стиле iOS (изображение включено)

Честно говоря, такой подход кажется мне немного тяжеловатым.

У вас уже есть пять изображений, так почему бы просто не создать спрайт, содержащий состояние нажатия для каждой отдельной кнопки, а также состояние ненажатия, а затем скользить, используя свойство CSS «background-position»?

Ваш CSS будет выглядеть примерно так:

div.buttons {
 background-image: url(images/myimage.png);
 background-position: 0 0;
 position:relative;
 width:64px;
}
div.buttons.dog{
 background-position: 0 32px;
}
div.buttons.cat{
 background-position: 0 64px;
}
div.buttons div.dog{
 position:absolute;
 left: 0;
 top: 0;
 width: 32px;
 height: 32px;
 border: transparent 1px solid;
}
div.buttons div.cat{
 position:absolute;
 left: 32px;
 top: 0;
 width: 32px;
 height: 32px;
 border: transparent 1px solid;
}

С вашим HTML как:

<div class="buttons">
 <div class="dog"></div>
 <div class="cat"></div>
</div>

А затем что-то простое для jQuery, например:

$('div.buttons').children().each(function(){
  $(this).click(function() { $(this).parent().addClass($(this).attr('class')).removeClass($(this).siblings().attr('class'));
});

ОБНОВЛЕНИЕ

По запросу спрашивающего, вот как вы могли бы реализовать наложение div на слой кнопки. Во-первых, начните с блока CSS div.buttons вверху, только вместо спрайта используйте свое изображение для кнопок в их положении по умолчанию «выключено».

Затем создайте четыре контейнера как таковые (здесь я использовал div, но вы могли бы использовать любой элемент, который дает соответствующий семантический контекст для контейнера).

CSS

div.buttons{
 background-image: url(images/myimage.png);
 background-position: 0 0;
 position:relative;
 width:136px; /* whatever your width for the image is */
}

div.fish, div.rabbit, div.dog, div.cat {
 position: absolute;
 top: 0;
 background-size: cover;
 height: 24px; /* Whatever the height of your buttonbar is */
}
div.cat{
 width: 32px; /* Width of your button */
 left: 0;
 background-image: none;
}
div.on.cat {
 background-image: url(path/to/catImage.png);
}
div.dog {
 left: 32px; /* The width of the preceding button(s), if they exist */     
 width: 40px; /* Width of your button */
 background-image: none;
}
div.on.dog {
 background-image: url(path/to/dogImage.png);
}
div.rabbit {
 left: 72px; /* The width of the preceding button(s), if they exist */     
 width: 32px; /* Width of your button */
 background-image: none;
}
div.on.rabbit {
 background-image: url(path/to/rabbitImage.png);
}
div.fish {
 left: 104px; /* The width of the preceding button(s), if they exist */     
 width: 40px; /* Width of your button */
 background-image: none;
}
div.on.fish {
 background-image: url(path/to/fishImage.png);
}

HTML

<div class="buttons">
   <div class="cat"></div>
   <div class="dog"></div>
   <div class="rabbit"></div>
   <div class="fish"></div>
</div>

Это предполагает, что ваш div, «обертывающий» фрагмент кнопки, имеет класс, соответствующий его животному, но, очевидно, это может быть все, что вы хотите. Затем в событии щелчка вы просто примените класс, который вам нужен, к нажатой кнопке. Используемый вами jQuery будет выглядеть так:

JQuery

$('.buttons > div').on('click',function(){
    var t = $(this);
    t.siblings.removeClass('on');
    t.addClass('on');

    //Whatever your button is supposed to do normally here
});