Офис НП 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 Pisatel Добавлено 25-10-2014 17:36 25 Октябрь 2014 17:36:48 8030 Прочтений 8030 Прочтений
 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;


}




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



Понравилась статья?
Метки для данной статьи
Теги:  #tabs #vertical tabs #html5 #html #jquery #css #css3 #js #javascript #простые табы #табы #вертикальные табы 
Похожие статьи
Заголовок
Категория
Просмотров
10404
36029
11489
28744
7672
Поделиться:   
Последние активные темы форума
  Темы Просмотров Ответов Последние сообщения
folder Вопрос по переделке bb-кода
PHP, MySQL		 22830 5 Pisatel
26. мая 2017
folder Вопросы по Ajax форме обратной связи
CMS PHP Fusion		 71724 48 Ditrin
19. февраля 2017
folder BBCode YouTube Video Colorbox mod
CMS PHP Fusion		 15710 2 Pisatel
10. декабря 2016
folder Как лучше создать собственную страницу?
CMS PHP Fusion		 18386 17 Pisatel
11. мая 2016
folder Небольшие вопросы по скриптам магазина и катало...
PHP, MySQL		 150047 80 Pisatel
11. января 2016
folder BBCode Code mod
CMS PHP Fusion		 14878 0 Pisatel
31. августа 2015
folder Ajax Like Dislike Article Panel
CMS PHP Fusion		 23180 16 Pisatel
07. июля 2015
folder Хлебные крошки / BreadCrumbs SEO Panel
CMS PHP Fusion		 26969 17 Pisatel
04. июля 2015
folder Abbr Description BBCode
CMS PHP Fusion		 7826 0 Pisatel
15. июня 2015
folder Плагин Email рассылки Mail To All by Pisatel
CMS PHP Fusion		 38075 32 Pisatel
26. апреля 2015
folder Подозрительный трафик и прочие страшилки
Всякая хрень		 12016 2 Ditrin
23. апреля 2015
folder Мод Newsletter - рассылка писем пользователям с...
CMS PHP Fusion		 31452 13 Pisatel
10. апреля 2015
folder Мод отправки писем PHPMailer для PHP-Fusion
CMS PHP Fusion		 133256 113 Ditrin
06. апреля 2015
folder Появление неизвестного файла subscriptions.php
CMS PHP Fusion		 8994 2 Pisatel
06. апреля 2015
folder Autoban on IP
CMS PHP Fusion		 23504 13 Pisatel
03. апреля 2015