Табы на jquery (tabs for jquery)

Самый простой таб без наворотов
js

 $(document).ready(function(){

	$('ul.tabs li').click(function(){
		var tab_id = $(this).attr('data-tab');

		$('ul.tabs li').removeClass('current');
		$('.tab-content').removeClass('current');

		$(this).addClass('current');
		$("#"+tab_id).addClass('current');
	})

})

css


.tab_product {
            padding-top:40px;
            
            
        }
		ul.tabs{
			margin: 0px;
			padding: 0px;
			list-style: none;
		}
		ul.tabs li{
		    
			background: none;
			color: #333333;
			display: inline-block;
			padding: 20px 25px;
			cursor: pointer;
            font-size:13px;
            font-weight:bold;
		}

		ul.tabs li.current{
			background: #f7f7f7;
			color: #333333;
		}

		.tab-content{
			display: none;
			background: #f7f7f7;
			padding: 30px;
		}
        .tab-content p, .tab-content li  {line-height:18px; font-size:13px; color:#333333;}
        .tab-content li { line-height:22px;}

		.tab-content.current{
			display: inherit;
		}


html

вход
Регистрация

Отправить комментарий

Другие статьи рубрики "табы"