<ul class="tabs-nav"> <li><a href="#tab-1">Особенности</a></li> <li><a href="#tab-2">Подробности</a></li> </ul> <div class="tabs-stage"> <div id="tab-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec neque nisi, dictum aliquet lectus.</div> <div id="tab-2">Phasellus pharetra aliquet viverra. Donec scelerisque tincidunt diam, eu fringilla urna auctor at.</div> </div>
body { color: #666; font: 14px/24px "Open Sans", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", Sans-Serif; } .tabs { max-width: 538px; } .tabs-nav li { float: left; width: 50%; } .tabs-nav li:first-child a { border-right: 0; border-top-left-radius: 6px; } .tabs-nav li:last-child a { border-top-right-radius: 6px; } a { background: #eaeaed; border: 1px solid #cecfd5; color: #0087cc; display: block; font-weight: 600; padding: 10px 0; text-align: center; text-decoration: none; } a:hover { color: #ff7b29; } .tab-active a { background: #fff; border-bottom-color: transparent; color: #2db34a; cursor: default; } .tabs-stage { border: 1px solid #cecfd5; border-radius: 0 0 6px 6px; border-top: 0; clear: both; padding: 24px 30px; position: relative; top: -1px; }
// Показать первую вкладку по умолчанию $('.tabs-stage div').hide(); $('.tabs-stage div:first').show(); $('.tabs-nav li:first').addClass('tab-active'); // Изменить класс вкладки и отобразить содержимое $('.tabs-nav a').on('click', function(event){ event.preventDefault(); $('.tabs-nav li').removeClass('tab-active'); $(this).parent().addClass('tab-active'); $('.tabs-stage div').hide(); $($(this).attr('href')).show(); });