Как сделать вкладки (табы)

    Приведем 2 способа сделать табы (вкладки): на чистом CSS и с использованием jQuery.

    Вкладки на CSS3

    HTML-код для такого способа будет выглядеть так:

    <div class="tab-wrap">
        <input type="radio" name="tabs" id="tab1" checked>
    	<div class="tab-label-content" id="tab1-content">
      		<label for="tab1">Первая вкладка</label>
      		<div class="tab-content">
      			TAB 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis egestas, nibh bibendum viverra semper, eros est semper libero, ac facilisis lectus sapien eu lorem. Nam suscipit nisl at ante tristique mattis. In convallis, nisl nec aliquet aliquet, nibh lorem molestie nisl, dapibus faucibus ipsum mi ut odio. Proin posuere tellus at hendrerit fringilla. 
    
      		</div>
    	</div>
     
    	<input type="radio" name="tabs" id="tab2">
    	<div class="tab-label-content" id="tab2-content">
      		<label for="tab2">Вторая вкладка</label>
      		<div class="tab-content">
      			TAB 2 - Quisque egestas, purus in tempor vulputate, diam augue mollis quam, quis elementum ipsum ex a risus. Quisque sed augue porta, facilisis felis vitae, cursus mi. Nullam mollis magna eget tincidunt mollis. Sed suscipit placerat ultricies. Sed eget lorem et ipsum ultricies congue eu a enim. Nam quis ex nec lorem dignissim suscipit eu ut felis. Vivamus molestie felis id purus congue, vel ultrices sem molestie.
      		</div>
    	</div>
    
    	<input type="radio" name="tabs" id="tab3">
    	<div class="tab-label-content" id="tab3-content">
    		<label for="tab3">Третья вкладка</label>
      		<div class="tab-content">
      			TAB 3 - Donec vulputate ante ac ligula vestibulum, id mollis diam commodo. Integer at consequat magna. Sed elit sem, dictum nec porttitor ac, ultrices id enim. Morbi semper eros a enim malesuada, eu finibus erat dictum. Ut vitae orci a odio sagittis malesuada. Cras volutpat vel lorem in tempor. Duis ultricies lectus sit amet tellus vehicula faucibus. Etiam sed leo ac erat tempor feugiat at quis ipsum. Mauris pellentesque nisl lorem, ac finibus sapien sagittis vel. Donec et lobortis est. Vestibulum dignissim ligula nec erat interdum, quis sollicitudin metus pretium. Vestibulum quis dui sapien. Proin commodo justo ac orci elementum molestie. Aliquam mattis orci vitae volutpat commodo.
      		</div>
    	</div>
    
     	<input type="radio" name="tabs" id="tab4">
     	<div class="tab-label-content" id="tab4-content">
    	    	<label for="tab4">Четвертая вкладка</label>
    			<div class="tab-content">
    				TAB 4 - Quisque egestas, purus in tempor vulputate, diam augue mollis quam, quis elementum ipsum ex a risus. Quisque sed augue 	porta, facilisis felis vitae, cursus mi. Nullam mollis magna eget tincidunt mollis. Sed suscipit placerat ultricies. Sed eget lorem et ipsum ultricies congue eu a enim. Nam quis ex nec lorem dignissim suscipit eu ut felis. Vivamus molestie felis id purus congue, vel ultrices sem molestie.
    			</div>
    	 	</div>
    </div>
    

    Соответственно стили будут такими:

    .tab-wrap {
        width: 100%;
        position: relative; 
    }
    .tab-wrap input[type="radio"][name="tabs"] {
        display: none;
        z-index: -1;
    }
    .tab-wrap input[type="radio"][name="tabs"]:checked + .tab-label-content label {
        border-bottom: 3px solid red; 
    }
    .tab-wrap input[type="radio"][name="tabs"]:checked + .tab-label-content .tab-content {
        display: inline-block;
        background: #ededed;
        padding: 15px; 
    }
    .tab-label-content {
        display: inline-block;
        margin-right: 15px; 
    }
    .tab-label-content .tab-content {
        position: absolute;
        top: 50px;
        left: 0px;
        line-height: 130%;
        display: none; 
    }

    Вкладки с использованием плагина jQuery

    HTML-код:

    <ul class="tabs2">
    	<li class="tab-link current" data-tab="tab-1">Первая вкладка</li>
    	<li class="tab-link" data-tab="tab-2">Вторая вкладка</li>
    	<li class="tab-link" data-tab="tab-3">Третья вкладка</li>
    	<li class="tab-link" data-tab="tab-4">Четвертая вкладка</li>
    </ul>
    
    <div id="tab-1" class="tab-content2 current">
    	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
    <div id="tab-2" class="tab-content2">
    	 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
    <div id="tab-3" class="tab-content2">
    	Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
    <div id="tab-4" class="tab-content2">
    	Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>

     

    CSS

    ul.tabs2{
    	margin: 0px;
    	padding: 0px;
    	list-style: none;
    }
    ul.tabs2 li{
    	background: none;
    	color: #fff;
    	display: inline-block;
    	padding: 5px 20px;
    	cursor: pointer;
    	background: #00bcd4;
    }
    
    ul.tabs2 li.current{
    	background: #00bcd4;
    	color: #fff;
    	border-bottom: 3px solid red;
    }
    
    .tab-content2{
    	display: none;
    	background: #ededed;
    	padding: 15px;
    }
    
    .tab-content2.current{
    	display: inherit;
    }

     

    Скрипт на jQuery

    $(document).ready(function(){
    	$('ul.tabs2 li').click(function(){
    	var tab_id = $(this).attr('data-tab');
    		$('ul.tabs2 li').removeClass('current');
    		$('.tab-content2').removeClass('current');
    		$(this).addClass('current');
    		$("#"+tab_id).addClass('current');
    	})
    })

    Результат работы табов без javascript:

    TAB 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis egestas, nibh bibendum viverra semper, eros est semper libero, ac facilisis lectus sapien eu lorem. Nam suscipit nisl at ante tristique mattis. In convallis, nisl nec aliquet aliquet, nibh lorem molestie nisl, dapibus faucibus ipsum mi ut odio. Proin posuere tellus at hendrerit fringilla.
    TAB 2 - Quisque egestas, purus in tempor vulputate, diam augue mollis quam, quis elementum ipsum ex a risus. Quisque sed augue porta, facilisis felis vitae, cursus mi. Nullam mollis magna eget tincidunt mollis. Sed suscipit placerat ultricies. Sed eget lorem et ipsum ultricies congue eu a enim. Nam quis ex nec lorem dignissim suscipit eu ut felis. Vivamus molestie felis id purus congue, vel ultrices sem molestie.
    TAB 3 - Donec vulputate ante ac ligula vestibulum, id mollis diam commodo. Integer at consequat magna. Sed elit sem, dictum nec porttitor ac, ultrices id enim. Morbi semper eros a enim malesuada, eu finibus erat dictum. Ut vitae orci a odio sagittis malesuada. Cras volutpat vel lorem in tempor. Duis ultricies lectus sit amet tellus vehicula faucibus. Etiam sed leo ac erat tempor feugiat at quis ipsum. Mauris pellentesque nisl lorem, ac finibus sapien sagittis vel. Donec et lobortis est. Vestibulum dignissim ligula nec erat interdum, quis sollicitudin metus pretium. Vestibulum quis dui sapien. Proin commodo justo ac orci elementum molestie. Aliquam mattis orci vitae volutpat commodo.
    TAB 4 - Quisque egestas, purus in tempor vulputate, diam augue mollis quam, quis elementum ipsum ex a risus. Quisque sed augue porta, facilisis felis vitae, cursus mi. Nullam mollis magna eget tincidunt mollis. Sed suscipit placerat ultricies. Sed eget lorem et ipsum ultricies congue eu a enim. Nam quis ex nec lorem dignissim suscipit eu ut felis. Vivamus molestie felis id purus congue, vel ultrices sem molestie.





    Была ли эта статья полезна?
    ДаНет
    Получайте полезную информацию
    на Вашу почту еженедельно

    Ваш Email не будет передан третьим лицам