jquery hover tabs , bottom and top row, share central container -


hope well!

i've got small project here resolve...

…i've been playing , set jsfiddle here illustrate goal required…

…i've positioned tab elements top , bottom...top tabs green, bottom tabs red…

…the bottom row of tabs in red need different css class need apply different graphic those…

..i've had fiddle unsure of binding accommodate both "moving_bg" class top row of tabs…and "moving_bg-b" class bottom row.

…essentially 8 ul blocks of content, need share central container:

http://jsfiddle.net/amcbp/

…as can see have correct html structure , css applied, ul blocks don't slide beyond ul block number 4 when using bottom row of tabs.

...as jquery noob assistance, pointers appreciated!

the problem :

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

you have written animation 1 class .moving_bg top tabs anitmation working perfectly. bottom tab has .moving_bg-b class, no animation placed class.

if want use both top , bottom tabs animate need use union of both classes.

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

in above code doing union of both classes.

update jsfiddle : http://jsfiddle.net/amcbp/2/


Comments

Popular posts from this blog

javascript - backbone.js Collection.add() doesn't `construct` (`initialize`) an object -

php - Get uncommon values from two or more arrays -

Adding duplicate array rows in Php -