Офис НП 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 4811  Прочтений 4811 Прочтений  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 Плагин Email рассылки Mail To All by Pisatel
CMS PHP Fusion
13245 33 promask
27. апреля 2019
folder Вопрос по переделке bb-кода
PHP, MySQL
3325 5 Pisatel
26. мая 2017
folder Вопросы по Ajax форме обратной связи
CMS PHP Fusion
13773 48 Ditrin
19. февраля 2017
folder BBCode YouTube Video Colorbox mod
CMS PHP Fusion
7703 2 Pisatel
10. декабря 2016
folder Как лучше создать собственную страницу?
CMS PHP Fusion
7049 17 Pisatel
11. мая 2016
folder Небольшие вопросы по скриптам магазина и катало...
PHP, MySQL
52687 80 Pisatel
11. января 2016
folder BBCode Code mod
CMS PHP Fusion
4024 0 Pisatel
31. августа 2015
folder Ajax Like Dislike Article Panel
CMS PHP Fusion
8154 16 Pisatel
07. июля 2015
folder Хлебные крошки / BreadCrumbs SEO Panel
CMS PHP Fusion
9189 17 Pisatel
04. июля 2015
folder Abbr Description BBCode
CMS PHP Fusion
3040 0 Pisatel
15. июня 2015
folder Подозрительный трафик и прочие страшилки
Всякая хрень
5694 2 Ditrin
23. апреля 2015
folder Мод Newsletter - рассылка писем пользователям с...
CMS PHP Fusion
7722 13 Pisatel
10. апреля 2015
folder Мод отправки писем PHPMailer для PHP-Fusion
CMS PHP Fusion
41247 113 Ditrin
06. апреля 2015
folder Появление неизвестного файла subscriptions.php
CMS PHP Fusion
3715 2 Pisatel
06. апреля 2015
folder Autoban on IP
CMS PHP Fusion
13623 13 Pisatel
03. апреля 2015