в общем вот код http://jsfiddle.net/nwz46gap/2/
Проблема: при навешивании обработчика клика при такой верстке со свойствами
.container1, .container2, .container3 {
position: absolute;
}
осуществить клик по Tab2 практически невозможно. Не хотелось бы переделывать верстку. Может кто сталкивался с такой проблемой? И если переделывать верстку то какого подхода для таких целей придерживаться?
Лучше всего не переносить дом узлы из контейнера в контейнер. В общем виде задача решается через два отдельных (с независящей версткой) блока, один для табов один для содержимого табов. При клике по табу можно по индексу понимать какой блок с содержимым показывать.
В более сложных случаях, когда табы и контейнеры для содержимого генерируются динамически, можно отойти от установления связи между табом и содержимым по индексу, и использовать замыкания.
мне кажется тут изначально не правильно реализовано. как по мне лучше делать через делегирование событий и вешать обработчик на tabs-box. Сделать чтобы все таб имели одинаковые class, а в активный таб добавить class active. И в зависимости на какой таб click мишью на тот и добавлять class activ.
Можешь, пожалуйста, посмотреть стили - я чего-то там накрутил что скрипт перестал работать http://jsfiddle.net/6eran2nn/3/
Локализовал проблему - при добавлении display:none;в контейнер вся страничка пропадает. В фиддле все работает, с чем это может быть связано - понять не могу :(