<table class="tabsmenu"> <tr> <td><a href="#tab1" class="tabtitle">Tab 1</a></td> <!-- атрибут href должен содержать # и id соответствующего ему контейнера --> <td><a href="#tab2" class="tabtitle active">Tab 2</a></td><!--у активного по умолчанию элемента должен присутствовать класс active --> <td><a href="#tab3" class="tabtitle">Tab 3</a></td> <td><a href="#tab4" class="tabtitle">Tab 4</a></td> <td><a href="#tab5" class="tabtitle">Tab 5</a></td> </tr> <tr> <td class="tdcontainer" colspan="5"><!-- conspan должен быть равен кол-ву вкладок --> <div class="tabscontainer"><!-- все контейнеры с содержимым для вкладок должны находится в этом блоке --> <div id="tab1">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"> Default tab <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> </td> </tr> </table> <noscript> .tabscontainer div { display: block; } </noscript>
body { color: white; } /* стиль для реализации вкладок на основе таблицы */ .tabsmenu { border-collapse: collapse; border-spacing: 0; width: 90%; } .tabsmenu td { padding: 0 2px 0 0;/* компенсирует 2 пикселя границы у ссылки */ } td.tdcontainer { padding: 0; /* убирается отступ для ячейки с контейнером */ } /* стиль вкладок */ .tabsmenu a.tabtitle { display: inline-block; width: 100%; /* максимально растягиваем ячейки */ padding: 5px 0; /* поля сверху/снизу */ /* стили оформления */ text-align: center; text-decoration: none; border: 1px solid gray; /* для компенсации необходимо задать padding для ячеек выше */ border-radius: 10px 10px 0 0; color: gray; border-bottom: none; } /* стиль для активной вкладки */ .tabsmenu a.tabtitle.active { color: white; background-color: #021832; } /* стиль для контейнера содержимого вкладок */ .tabscontainer { height: 150px; /* рекомендуется фиксированная высота, чтобы не происходило дергания форума вверх-вниз при переключении между вкладками */ overflow: auto;/* добавит полосу прокрутки, если размер содержимого превышает размер контейнера */ /* стили оформления */ padding: 10px; border: 1px solid gray; border-top: none; /* фон вставлять сюда */ background-color: #021832; } /* стиль для блока с содержимым */ .tabscontainer div { display: none; /* по умолчанию скрыты все кроме активного */ } /* стиль для активного блока с содержимым */ .tabscontainer .active { display: block; }
/* магия делается здесь */ (function() { var tabs = $(".tabtitle").click(function(e) { $(".tabscontainer .active, .tabtitle.active ").removeClass("active"); $($(this).addClass("active").attr("href")).addClass("active"); e.preventDefault(); }); ((tabs.filter(".active").length === 1) ? tabs.filter(".active") : tabs.eq(0)).click(); }());