Изучаем jQuery. Базовые вкладки
Вкладки, которые позволяют логически группировать содержимое, стали основной составляющей интерфейсов многих настольных приложений. Они также широко используются во Всемирной сети, если брать в расчет навигационные элементы верхнего уровня, стилизованные под вкладки. Однако в мире JavaScript вкладки обычно применяются для разбивки содержимого на несколько секций, между которыми можно переключаться, с целью экономии пространства.
Практически любая веб-страница содержит множество похожих компонентов, которые встречаются и на других сайтах. Это меню, навигация, элементы форм, заголовки и колонки. Чтобы меньше писать кода и по максимуму задействовать уже готовые решения применяются специализированные библиотеки, их часто называют фреймворками. Одним из таких фреймворков для вёрстки является Bootstrap.
Less — это препроцессор CSS, позволяющий использовать переменные, функции, циклы и другие технологии для упрощения работы со стилями. Препроцессор в данном случае означает, что мы имеем дело с динамическим языком стилей, который преобразуется в CSS.
В CSS нет переменных, нет функций, нет повторяющихся фрагментов кода, в общем, нет ничего, что характерно для любого языка программирования и облегчения работы. На помощь приходят препроцессоры CSS, одним из них как раз и является Sass (Syntactically Awesome Stylesheets). Sass это особый метаязык, похожий на CSS, который поддерживает множество возможностей необходимых для работы со стилями.
$(document).ready(function(){
$('#info p:not(:first)').hide();
$('#info-nav li').click(function(event) {
event.preventDefault();
$('#info p').hide();
$('#info-nav .current').removeClass("current");
$(this).addClass('current');
var clicked = $(this).find('a:first').attr('href');
$('#info ' + clicked).fadeIn('fast');
}).eq(0).addClass('current');
});