css вкладки, которые не требуют изменений div для активной вкладки

Question

Я ищу идеи о том, как вообще не изменять код, используемый для создания вкладок CSS (чтобы я мог поместить его во включаемый файл, чтобы избежать дублирования кода во всех файлах, которые его используют), но мой текущая реализация не позволяет этого, потому что мне нужно выбрать активную вкладку, используя id = "selectedTab".

Единственная найденная мною реализация, которая решает эту проблему, это следующая: http://unraveled.com/publications/css_tabs/

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

Это единственный способ или есть другие альтернативы?

Мой текущий код выглядит следующим образом (id = noajax "используется, чтобы избежать использования ajax для загрузки определенных страниц):

<div class="productTabsBlock2">
  <a id="selectedTab" href="/link1" >OVERVIEW</a>
  <a href="/link2">SCREENSHOTS</a>
  <a id="noajax" href="/link3" >SPEED TESTS</a>
  <a href="/link4" >AWARDS</a>
</div>

РЕДАКТИРОВАТЬ: asp доступен на стороне сервера и уже используется на этих страницах.

Answer 1

Если вы ищете решение не от JS, то класс body / id обеспечивает самый простой способ сделать то, что вы хотите.

Если у вас есть доступ к библиотеке JS, вы можете легко добавить «выбранный» класс к любому элементу <a> и изменить его внешний вид.

На тот случай, если вы не заметили, вы можете использовать более одного определения класса в элементе. Например, <a class="noajax selected" /> допустимо, и к элементу будут применены оба селектора CSS .noajax и .selected.

Answer 2

вы можете использовать jQuery для добавления идентификатора (или класса) selectedTab, например,

$('.productTabsBlock2 a').mouseover(function () {
  $(this).addClass('selectedTab');
});

Answer 3

Включаемый файл для чего?Если это серверный язык программирования, такой как PHP, вы можете передать параметр для выбранной вкладки различными способами.