jquery hover tabs, нижняя и верхняя строки, общий центральный контейнер

Надеюсь, вы хорошо!

У меня есть небольшой проект, который нужно решить...

… я играл и настроил здесь jsfiddle, чтобы проиллюстрировать требуемую цель…

…я расположил элементы вкладок сверху и снизу…верхние вкладки зеленые, нижние – красные…

…нижний ряд вкладок, выделенных красным цветом, должен быть другим классом CSS, так как мне нужно применить к ним другую графику…

.. у меня была скрипка, но я не уверен, что привяжу ее для размещения как класса «moving_bg» для верхнего ряда вкладок…, так и класса «moving_bg-B» для нижнего ряда.

…по сути, 8 блоков контента UL должны совместно использовать этот центральный контейнер:

http://jsfiddle.net/AMCBP/

…как мы видим, у нас правильная структура html и CSS, однако блоки UL не выходят за пределы блока UL номер 4 при использовании нижнего ряда вкладок.

... как новичок jquery любая помощь, указатели очень ценятся!


jquery tabs hover
person annieFlower    schedule 07.07.2012    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Проблема заключалась в следующем:

   var background = $(this).parent().find(".moving_bg");

Вы написали анимацию только для одного класса .moving_bg, который является вашими верхними вкладками, поэтому анимация работала отлично. Ваша нижняя вкладка имеет класс .moving_bg-B, поэтому анимация для этого класса не размещена.

Если вы хотите использовать обе вкладки Top и Bottom для анимации вместе, вам нужно использовать объединение обоих классов.

 var background = $(this).parent().find(".moving_bg,.moving_bg-B");

В приведенном выше коде я делаю объединение обоих классов.

Обновите JSfiddle для себя: http://jsfiddle.net/AMCBP/2/

person Suave Nti    schedule 07.07.2012
comment
...спасибо за ответ, очень признателен, вы правы с дополнительным классом moving_bg-B... - person annieFlower; 09.07.2012
comment
… у меня проблема в том, что нижний ряд вкладок должен скользить в последних четырех блоках, так как у меня их восемь, а не четыре… - person annieFlower; 09.07.2012
comment
…так, например, в данный момент вкладка Заголовок 5 внизу просто показывает первый контент… когда нужно показать пятый блок (поскольку технически это пятая вкладка) - person annieFlower; 09.07.2012
comment
... например... Вкладка «Заголовок 5» при наведении показывает блок «Содержание 5», а не блок «Содержание 1». Вкладка «Заголовок 8» откроет блок «Содержание 8». Спасибо заранее! - person annieFlower; 09.07.2012
comment
…как мы видим, на данный момент блоки UL не выходят за пределы блока UL номер 4 при использовании нижнего ряда вкладок. - person annieFlower; 09.07.2012
comment
...если все вкладки все вверху, то работает, но проблема возникает, когда вкладки находятся в другом блоке разметки ниже вниз › ссылка - person annieFlower; 09.07.2012
comment
... поэтому мне нужно как-то имитировать это, но вместо этого с вкладками внизу: ИСХОДНАЯ ССЫЛКА НА FIDDLE - person annieFlower; 09.07.2012