Как отделить CSS-позиционирование от CSS-стиля?

Question

Позвольте мне объяснить, что я хочу.У меня есть следующее (частичное) HTML.

<ul>
    <li class="positioncommunity"><a href="#">community</a></li>
    <li class="positionsolutions"><a href="#">solutions</a></li>
    <li class="positionmeetings"><a href="#">meetings</a></li>
</ul>

<div id="tab_content">
</div>

сообщество, решения и встречи - это три вкладки на html-странице.Я хочу изменить div "tab_content" в зависимости от того, на какой вкладке нажимает пользователь.

Я также хочу, чтобы пользователь знал, на какой вкладке он находится. Поэтому я хочу выделить элемент tab.Вот где я сталкиваюсь с проблемой.У меня есть следующие CSS для элементов вкладки.

#leftPan ul li.positioncommunity{padding:20px 0 0 53px;}
#leftPan ul li.positionsolutions{padding:20px 0 0 100px;}
#leftPan ul li.positionmeetings{padding:20px 0 0 40px;}

Вы можете видеть, что у меня есть три класса CSS для позиционирования элементов вкладки.Теперь, как мне применить фоновое изображение к элементу tab без изменения класса CSS.В частности, Я ищу шаблон дизайна, чтобы отделить стили CSS элементов от позиционирования CSS .Пожалуйста, помогите мне с NEAT решением вышеуказанной проблемы.Я уверен, что это очень распространенная проблема, но я не могу найти удовлетворительного решения.

Answer 1

Самый правильный способ - использовать для этого дополнительный класс.В любом случае вы можете установить фон в JavaScript (у вас будет обработчик кликов).Без JavaScript вы не сможете его реализовать.Css не может отреагировать на событие нажатия.

http://jsfiddle.net/KDyky/

ul li { float:left;  }
ul li a { margin:2px; padding:3px 7px; display:block; }

$('ul li a').click(function() {
    $('ul li a').css({ background: 'none' });
    $(this).css({ background: 'green' });
    return false;
});

для фона используйте ваше изображение.