<ul class="tabsmenu"> <li><a href="#tab1" class="tabtitle active">Tab 1</a></li> <li><a href="#tab2" class="tabtitle">Tab 2</a></li> <li><a href="#tab3" class="tabtitle">Tab 3</a></li> <li><a href="#tab4" class="tabtitle">Tab 4</a></li> <li><a href="#tab5" class="tabtitle">Tab 5</a></li> </ul> <div class="tabscontainer"> <div id="tab1" class="active">Tab1 text<br /> Tab1 text<br /> Tab1 text<br /> Tab1 text<br /> Tab1 text<br /> Tab1 text<br /> Tab1 text<br /> Tab1 text<br /> Tab1 text<br /> Tab1 text<br /> Tab1 text<br /> Tab1 text<br /> Tab1 text<br /> Tab1 text<br /> Tab1 text<br /> </div> <div id="tab2"> Tab2 text <br /> Tab2 text <br /> Tab2 text <br /> Tab2 text <br /> Tab2 text <br /> Tab2 text <br /> Tab2 text <br /> Tab2 text <br /> Tab2 text <br /> </div> <div id="tab3">Tab3 text</div> <div id="tab4">Tab4 text</div> <div id="tab5">Tab5 text</div> </div> <noscript> .tabscontainer div { display: block; } </noscript>
/* стиль для реализации вкладок без таблицы */ .tabsmenu li { float: left; } .tabsmenu:after { content: ""; display: block; clear: both; } /* стиль вкладок */ .tabtitle { display: inline-block; padding: 5px 20px; text-decoration: none; border: 1px solid gray; } /* стиль для активной вкладки */ .tabtitle.active { color: red; } /* стиль для контейнера содержимого вкладок */ .tabscontainer { height: 200px; /* рекомендуется фиксированная высота, чтобы не происходило дергания форума вверх-вниз при переключении между вкладками */ overflow: auto;/* добавит полосу прокрутки, если размер содержимого превышает размер контейнера */ border: 1px solid #999999; /* фон вставлять сюда */ } /* стиль для блока с содержимым */ .tabscontainer div { display: none; /* по умолчанию скрыты все кроме активного */ } /* стиль для активного блока с содержимым */ .tabscontainer .active { display: block; }
/* магия делается здесь */ $(".tabtitle").click(function(e) { $(".tabscontainer .active, .tabtitle.active ").removeClass("active"); $($(this).addClass("active").attr("href")).addClass("active"); e.preventDefault(); });