Табы для сайта (вкладки) на javascript!

Вкладки на javascript

Приветствую всех читателей этого блога! Сегодня я расскажу о том, как можно сделать простые и “легкие” вкладки (tabs) для вашего сайта.

Вкладки – это очень удобные элементы веб-ресурса, так как они экономят время, улучшают юзабилити, да и в качестве элементов дизайна их тоже нередко используют.

Давайте рассмотрим основные особенности табов и разберем код на javascript.

Основные особенности

Во-первых вкладки будут реагировать не только на клик мыши, но и на наведение (то есть для смены вкладки достаточно навести курсор мыши) .

Во-вторых, наши вкладки будут автоматически изменяться свой размер в зависимости от названия (длины названия) разделов.

Это значит, что если вам нужно будет сменить название какого-нибудь раздела, то вам не нужно будет изменять список стилей (сss) – размеры автоматически будут настроены.

В-третьих название Активной (текущей, выбранной) вкладки будет “подсвечено” с помощью белой рамки.

Разберем код..

<script type="text/javascript">

		//Номер текущего выбранного таба
	var curent_tab = 1;
	
		//Названия табов
	var tabName_1 = "Автомобили";
	var tabName_2 = "Энциклопедия";
	var tabName_3 = "Развлечения";
	
	
			//Функция установки настроек
	function setting(){
		
			var wrapper = document.getElementById('wrap');
			
				//Выбираем все кнопки, присваивая их глобальным переменным
			window.battom1 = document.getElementById('bat_1');
			window.battom2 = document.getElementById('bat_2');
			window.battom3 = document.getElementById('bat_3');
		
				//Даем табам названия
			battom1.innerHTML = tabName_1;
			battom2.innerHTML = tabName_2;
			battom3.innerHTML = tabName_3;
		
				//Выбираем все Div блоки, присваивая их глобальным переменным
			window.taba1 = document.getElementById('tab_1');
			window.taba2 = document.getElementById('tab_2');
			window.taba3 = document.getElementById('tab_3');
					
			var newWidth = battom1.clientWidth + battom2.clientWidth + battom3.clientWidth; 

			newWidth += 6;
			
			wrapper.style.width =  newWidth + 'px';
			
			taba1.style.width = newWidth + 'px';
			taba2.style.width = newWidth + 'px';
			taba3.style.width = newWidth + 'px';			
	}

	function show_tab(num){
	

		if(num == 1 && curent_tab != num){
				
				taba1.style.display='block';	
				battom1.style.border = '1px solid #ffffff';
				
				battom2.style.border = 'none';
				battom3.style.border = 'none';
				
				
				taba2.style.display='none';
				taba3.style.display='none';
				curent_tab = num;
		}
		
		if(num == 2 && curent_tab != num){
		
				taba2.style.display='block';	
				battom2.style.border = '1px solid #ffffff';
				
				battom1.style.border = 'none';
				battom3.style.border = 'none';
				
				taba1.style.display='none';
				taba3.style.display='none';
				curent_tab = num;
		}
	
		if(num == 3 && curent_tab != num){
		
				taba3.style.display='block';	
				battom3.style.border = '1px solid #ffffff';
				
				battom1.style.border = 'none';
				battom2.style.border = 'none';
				
				taba1.style.display='none';
				taba2.style.display='none';
				curent_tab = num;
		}
	}

</script>

Каждую строчку кода разбирать не будем, исходя из комментариев все должно быть понятно, разберем некоторые только некоторые моменты.

В коде имеются две основные функции, первая из которых: setting() – соответственно эта функция отвечает за первоначальные настройки, а именно:

  • Выборка элементов по id (вкладок, блоков)
  • Присвоение табам их названия
  • Вычисление новых размеров div блоков
  • Изменение размеров блоков

Данная функция вызывается в момент загрузки страницы, а именно элемента body:

<body onload=”setting()”>

Идем далее..

show_tab – эта функция отвечает за показ нужных вкладок и срабатывает при наведении мыли либо по клику.

У нее имеется параметр num – это номер текущей табы, он проверяется при вызове функции и если он равен номеру текущей вкладки (то есть мы навели на уже выбранную, активную вкладку), то ничего не происходит, иначе, тот блок, который мы выбрали, становится видимым, а два других исчезают (становятся невидимыми.)

Также, переменной, отвечающей за текущий таб, присваивается значение переданного параметра:

curent_tab = num;

Можно взглянуть на пример работы вышеописанного алгоритма, а также скачать html страницу данного примера.

Demo пример вкладок

Скачать пример

На этом все, надеюсь вы найдете им применение, пока!


Хостинг, которым я пользуюсь: Good-Host


Похожие статьи

  1. Екатерина пишет:

    Здравствуйте!
    Скажите, пожалуйста, как изменить цвет табов на зеленый? И как установить их на Юкоз?
    Заранее спасибо.

    • Здравствуйте, чтобы изменить цвет на зеленый, можно к каждому табу прописать фон и убрать класс – myButton, например, заменив это:

      <span style="border: 1px solid #ffffff;" onmouseover="show_tab(1)" onclick="show_tab(1)" id="bat_1" class="myButton">Автомобили</span>

      На это:

      <span style="border: 1px solid #ffffff;background: green;" onmouseover="show_tab(1)" onclick="show_tab(1)" id="bat_1">Автомобили</span>

      И так для каждого таба.

      Для установки на юкоз необходимо скопировать код из примера и вставить его в место, где должны выводиться табы – скопировать начиная от:

      <body onload="setting()">

      И заканчивая последним:

      </div>

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

Ваш email не будет опубликован. Обязательные поля отмечены *

*

code

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>