Офис НП AMWAY в Ярославле
Офис Амвей в Ярославле
На карте Офис AMWAY в ЯрославлеПрием и выдача заказов, презентация продукции Амвей, мастер–классы, вопросы по бизнесу Amway:
Адрес: улица Валентины Терешковой, дом 1 (Вход со двора)
Телефон: +7 (920) 112-00-91
Email: matyxho@mail.ru
Сайт: https://www.amway.ru/user/lebedem
Визитка: http://yar.meweb.ru
Иерархия статей
Статьи » HTML, CSS, JS » JQuery: простые вертикальные табы
Сниппет
Создаем простые вертикальные табы средствами JQuery, HTML и CSS
JQuery: простые вертикальные табы
Опубликовал  Pisatel Добавлено  25-10-2014 17:36 25 Октябрь 2014 17:36:48 3722  Прочтений 3722 Прочтений  0 Комментариев 0 Комментариев
 printer
Сразу честно признаюсь: нашел данное творение на бескрайних просторах тырнета, добавил/исправил несколько мелочей и решил поделиться тем, что получилось. Итак, начнем с разметки:

Код: HTML5
<head>

<link rel='stylesheet' href='style.css' media='screen' />



<link rel='stylesheet' href='font-awesome.min.css' media='screen' /> <!-- стиль иконок, ссылка на загрузку будет ниже -->

<script src='js/jquery.min.js'></script> <!-- можно опустить, если фреймворк уже подключен -->

<script src='js/tabs.js'></script> <!-- небольшой файл, который и будет заставлять работать наши табы -->

</head>

<!-- ну и далее- сама разметка страницы -->

<div class='mycenter'>

<div class='info_c'><h4>Вертикальные табы на JQuery</h4></div>

<div id='wc' class='clearfix'>

<ul id='sidemenu'>

<li><a href='#tab1' class='open'><i class='fa fa-file-text fa-lg fa-red'></i><strong>Простой текст</strong></a></li>

<li><a href='#tab2'><i class='fa fa-html5 fa-lg'></i><strong>Форма HTML5</strong></a></li>

<li><a href='#tab3'><i class='fa fa-image fa-lg'></i><strong>Изображение</strong></a></li>

<li><a href='#tab4'><i class='fa fa-list-ul fa-lg'></i><strong>Список</strong></a></li>

</ul>

<div id='wcontent'>

<article>

<div id='tab1' class='wcontentblock'>

<h2>Простой текст</h2>

<div>Здесь любое количество текста. Таб будет увеличиваться, если текст будет объемным. Также можно использовать любое html-содержимое (теги)</div>

</div><!-- end #tab1 -->

</article>

<article>

<div id='tab2' class='wcontentblock hidden'>

<h2>Форма HTML5</h2>

<form validate='validate'>

<label for='tel'>Телефон моб</label> <input name='tel' type='tel' pattern='8[0-9]{10}' placeholder='Формат 89201234567' />

<label for='tel1'>Телефон дом</label> <input name='tel1' type='tel'pattern='[0-9]{2,3}-[0-9]{2}-[0-9]{2}' placeholder='Формат 123-45-67' />

<label for='range'>Выбор числа</label> <input name='range' type='range'min='1' max='10' placeholder='Число от 1 до 10' />

<label for='color'>Выбор цвета</label> <input name='color' type='color' placeholder='Выбор цвета' /><br />

<label for='email'>Email</label> <input name='email' type='email' pattern='b[a-zA-Zа-яА-Я0-9._%+-]+@[a-zA-Zа-яА-Я0-9.-]+.[a-zA-Zа-яА-Я]{2,6}b' placeholder='Email' />

<label for='password'>Пароль</label> <input name='password' type='password'min='1' max='10' placeholder='Пароль' />

</form>

</div><!-- end #tab2 -->

</article>

<article>

<div id='tab3' class='wcontentblock hidden'>

<h2>Изображение</h2>

<img src='demo/images/demo_tabs.gif' alt='Tabs demo' /> Картинка в вертикальном табе на JQuery. Можно здесь добавить любой текст, он будет обтекать изображение. &quot;Если ХОЧЕШЬ чего-то добиться- найдется тясяча способов. Если НЕ хочешь- тысяча причин.&quot;

</div><!-- end #tab3 -->

</article>

<article>

<div id='tab4' class='wcontentblock hidden'>

<h2>Маркированный список</h2>

<div>Маркированный список с квадратным маркером

<ul>

<li>Раз</li>

<li>Два</li>

<li>Три</li>

<li>Четыре</li>

<li>Пять</li>

<li>Шесть</li>

<li>Семь</li>

<li>Восемь</li>

<li>Девять</li>

<li>Десять</li>

</ul>

</div>

</div><!-- end #tab4 -->

</article>

</div><!-- end #wcontent -->

</div>

</div>




Я применил для красоты шрифт Font Awesome v4.2.0, он дает большой набор иконок (никаких изображений, чистый шрифт), вы можете скачать его самостоятельно и по карте на сайте выбрать нужные иконки. Ну а мы идем далее- наш файл tabs.js:

Код: JQUERY
   $(function() {

/* задаем действия при клике */

$('#sidemenu a').on('click', function(e){

/* отменяем событие по умолчанию */

e.preventDefault();



if($(this).hasClass('open')) {

/* сюда можно что-нибудь добавить для элемента с классом "open" */

} else {

/* запомнили значение атрибута href у ссылки с классом open */

var oldcontent = $('#sidemenu a.open').attr('href');



var newcontent = $(this).attr('href');

/* скрываем контент, который был открыт */

$(oldcontent).fadeOut('fast', function() {

/* показываем контент, на таб которого кликнули, удаляя класс hidden */

$(newcontent).fadeIn().removeClass('hidden');

/* а старому табу добавляем класс hidden */

$(oldcontent).addClass('hidden');



});

/* во всей навигации табов удаляем класс open */

$('#sidemenu a').removeClass('open');

/* а выбранному табу в навигации добавляем класс open */

$(this).addClass('open');



/* для всех иконок удаляем класс fa-red */

$('#sidemenu a i').removeClass('fa-red');

/* для выбранного таба в навигации добавляем к иконке класс fa-red */

$(this).find('i').addClass('fa-red');



}



});



});




Как вы уже, наверное, догадались, мы банально удаляем/добавляем классы к контенту скрывая или показывая его при помощи javascript. Ну и последний штрих- это стиль. Как всегда, можете править его на свое усмотрение, я выкладываю тот, что работает в демке:

Код: CSS
.mycenter {



display: block;



margin: 100px auto;



width: 50%;



}



.info_c {



border-top: 8px solid rgb(255, 145, 20);



position: relative;



background: #fefefe;



text-align: center;



}



.info_c:after {



content: '';



position:absolute;



width: 0;



height: 0;



border:10px solid rgb(255, 145, 20);



border-bottom: 0 solid rgba(0, 0, 0, 0)!important;



border-right: 10px solid rgba(0, 0, 0, 0)!important;



border-left: 10px solid rgba(0, 0, 0, 0)!important;



left:10%;



top:0;



margin-left: -10px;



}



.info_c h4 {



font-size: 2.5em;



color: #333;



font-weight: 700;



padding-top: 0.5em;



padding-bottom: 0.5em;



}



#wc {



display: block;



width: 100%;



margin: 5% auto;



background: none;



}







#wcontent {



display: block;



background: #fff;



padding: 0 15px;



margin-right: 22%;



background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dfdfdf));



background: -webkit-linear-gradient(#fff 0%, #dfdfdf 100%);



background: -moz-linear-gradient(#fff 0%, #dfdfdf 100%);



background: -o-linear-gradient(#fff 0%, #dfdfdf 100%);



background: -ms-linear-gradient(#fff 0%, #dfdfdf 100%);



-webkit-box-shadow: 0 2px 3px #ccc, 0 0 4px 3px #fff inset;



-o-box-shadow: 0 2px 3px #ccc, 0 0 4px 3px #fff inset;



-moz-box-shadow: 0 2px 3px #ccc, 0 0 4px 3px #fff inset;



box-shadow: 0 2px 5px #ccc, 0 0 4px 3px #fff inset;



min-height: 250px;



}



#wcontent div {



color: #333;



font-size: 1em;



}



#wcontent div ul {



list-style-type: square;



margin-left: 1em;



}



#wcontent div ul li {



padding-left: 0.1em;



}



#wcontent div h2 {



text-align: center;



color: rgb(255, 121, 0);



font-size: 1.3em;



font-weight: 400;



text-transform: uppercase;



text-shadow: 1px 1px #bbb;



-o-text-shadow: 1px 1px #bbb;



-webkit-text-shadow: 1px 1px #bbb;



-moz-text-shadow: 1px 1px #bbb;



}



#wcontent img {



float: left;



margin: 0.5em;



border: 1px solid #bbb;



box-shadow: 0 1px 2px rgba(0,0,0,.2);



}



#wcontent label {



float: left;



width: 30%;



margin-right: 1em;



color: #333222;



font-size: 0.9em;



}



#wcontent input {



border: 1px solid #333;



border-radius: 5px;



width: 60%;



}



#wcontent label, #wcontent input {



margin-top: 0.5em;



margin-bottom: 0.5em;



}



#wcontent div div::first-letter {



font-size: 2.7em;



color: #9e0508;



float: left;



margin: 0 4px 2px 0;



}



.wcontentblock {



display: block;



padding: 15px 10px;



}



.wcontentblock.hidden {



display: none;



}



#sidemenu {



margin: 0;



padding: 0;



width: 22%;



float: right;



background: #b8b8b8;



border-left: 1px solid #c9c9c9;



}



#sidemenu li {



display: block;



text-align: center;



border-top: 1px solid #fff;



font-size: 1em;



font-weight: 400;



}



#sidemenu li a {



display: block;



padding: 6px 2px;



color: #555;



text-decoration: none;



border-bottom: 1px solid #d1d1d1;



}



#sidemenu li a:hover {



background: #f2f2f2;



}



#sidemenu li a strong {



display: block;



margin-top: 5px;



}



#sidemenu li a.open {



width: 101%;



background: #fff;



font-size: 1.1em;



font-weight: 500;



text-shadow: 1px 1px #ddd;



}



.fa-red {

color:#ff030d;

}




Вот так вот все просто :-) Смотрим пример, пробуем. Всего наилучшего!



Понравилась статья?
Метки для данной статьи
Похожие статьи
Поделиться:   
Комментарии
Нет комментариев.
Добавить комментарий
Имя:

Проверочный код:
Последние активные темы форума
  Темы Просмотров Ответов Последние сообщения
folder Вопрос по переделке bb-кода
PHP, MySQL
805 5 Pisatel
26. мая 2017
folder Вопросы по Ajax форме обратной связи
CMS PHP Fusion
5062 48 Ditrin
19. февраля 2017
folder BBCode YouTube Video Colorbox mod
CMS PHP Fusion
5955 2 Pisatel
10. декабря 2016
folder Как лучше создать собственную страницу?
CMS PHP Fusion
3769 17 Pisatel
11. мая 2016
folder Небольшие вопросы по скриптам магазина и катало...
PHP, MySQL
37536 80 Pisatel
11. января 2016
folder BBCode Code mod
CMS PHP Fusion
2835 0 Pisatel
31. августа 2015
folder Ajax Like Dislike Article Panel
CMS PHP Fusion
5104 16 Pisatel
07. июля 2015
folder Хлебные крошки / BreadCrumbs SEO Panel
CMS PHP Fusion
5638 17 Pisatel
04. июля 2015
folder Abbr Description BBCode
CMS PHP Fusion
2056 0 Pisatel
15. июня 2015
folder Плагин Email рассылки Mail To All by Pisatel
CMS PHP Fusion
7915 32 Pisatel
26. апреля 2015
folder Подозрительный трафик и прочие страшилки
Всякая хрень
3302 2 Ditrin
23. апреля 2015
folder Мод Newsletter - рассылка писем пользователям с...
CMS PHP Fusion
4835 13 Pisatel
10. апреля 2015
folder Мод отправки писем PHPMailer для PHP-Fusion
CMS PHP Fusion
23245 113 Ditrin
06. апреля 2015
folder Появление неизвестного файла subscriptions.php
CMS PHP Fusion
2497 2 Pisatel
06. апреля 2015
folder Autoban on IP
CMS PHP Fusion
10417 13 Pisatel
03. апреля 2015