Форум

dima_riabets · #1 (**permalink**) 06.12.2015, 23:16

Вот это переключатель вкладок:

<script src="http://demo.webcareer.ru/2015/02/tabs/js/jquery-1.11.1.min.js"></script>
<script>
		$(document).ready(function(){
			$('.tabs_menu a').click(function(e){
				e.preventDefault();
				$('.tabs_menu .active').removeClass('active');
				$(this).addClass('active');
				var tab = $(this).attr('href');
				$('.tab').not(tab).css({'display':'none'});
				$(tab).fadeIn(400);
			});
		});
		</script>


<div class="tabs_box">
			<ul class="tabs_menu">
				<li><a href="#tab1" class="active">Вкладка 1</a></li>
				<li><a href="#tab2">Вкладка 2</a></li>
				<li><a href="#tab3">Вкладка 3</a></li>
			</ul>
			<div class="tab" id="tab1">
				<p>Вкладка 1. Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн.</p>

                <p>Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться. Lorem Ipsum используют потому, что тот обеспечивает более или менее стандартное заполнение шаблона, а также реальное распределение букв и пробелов в абзацах, которое не получается при простой дубликации "Здесь ваш текст.. Здесь ваш текст.. Здесь ваш текст.." Многие программы электронной вёрстки и редакторы HTML используют Lorem Ipsum в качестве текста по умолчанию.</p>
			</div>
			<div class="tab" id="tab2">
				<p>Вкладка 2. Многие думают, что Lorem Ipsum - взятый с потолка псевдо-латинский набор слов, но это не совсем так. Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад. Ричард МакКлинток, профессор латыни из колледжа Hampden-Sydney, штат Вирджиния, взял одно из самых странных слов в Lorem Ipsum, "consectetur", и занялся его поисками в классической латинской литературе.</p>

                <p>Есть много вариантов Lorem Ipsum, но большинство из них имеет не всегда приемлемые модификации, например, юмористические вставки или слова, которые даже отдалённо не напоминают латынь. Если вам нужен Lorem Ipsum для серьёзного проекта, вы наверняка не хотите какой-нибудь шутки, скрытой в середине абзаца. Также все другие известные генераторы Lorem Ipsum используют один и тот же текст, который они просто повторяют, пока не достигнут нужный объём. Это делает предлагаемый здесь генератор единственным настоящим Lorem Ipsum генератором.</p>		
			</div>
			<div class="tab" id="tab3">
				<p>Вкладка 3. Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться. Lorem Ipsum используют потому, что тот обеспечивает более или менее стандартное заполнение шаблона, а также реальное распределение букв и пробелов в абзацах, которое не получается при простой дубликации "Здесь ваш текст.. Здесь ваш текст.. Здесь ваш текст.." Многие программы электронной вёрстки и редакторы HTML используют Lorem Ipsum в качестве текста по умолчанию, так что поиск по ключевым словам "lorem ipsum" сразу показывает, как много веб-страниц всё ещё дожидаются своего настоящего рождения.</p>

				<p>Классический текст Lorem Ipsum, используемый с XVI века, приведён ниже. Также даны разделы 1.10.32 и 1.10.33 "de Finibus Bonorum et Malorum" Цицерона и их английский перевод, сделанный H. Rackham, 1914 год.</p>
			</div>
		</div>
    </body>

рони · #2 (**permalink**) 07.12.2015, 00:20

dima_riabets,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">

<style type="text/css">
  .active{
      background: #87CEEB
  }

  </style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script><script>
 		$(function() {
		    var t = $('.tabs_box'),
		        a = $('.tabs_menu a');
		    a.click(function(e) {
		        e.preventDefault();
		        $('.tabs_menu a.active').removeClass('active');
		        $(this).addClass('active');
		        var tab = $(this).attr('href');
		        $('.tab').not($(tab).fadeIn(400)).css({
		            'display': 'none'
		        });
		    });
		    var timer;

		    function go() {
		        window.clearTimeout(timer);
		        var i = a.index($('.active')),
		            l = a.length;
		        i = ++i % l;
		        a.eq(i).click();
		        timer = window.setTimeout(go, 1500)
		    }
		    t.on({
		        mouseenter: function() {
		            window.clearTimeout(timer);
		        },
		        mouseleave: go
		    })

		    go()
		});
		</script>
 </head>

<body>

<div class="tabs_box">
			<ul class="tabs_menu">
				<li><a href="#tab1" class="active">Вкладка 1</a></li>
				<li><a href="#tab2">Вкладка 2</a></li>
				<li><a href="#tab3">Вкладка 3</a></li>
			</ul>
			<div class="tab" id="tab1">
				<p>Вкладка 1. Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн.</p>

                <p>Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться. Lorem Ipsum используют потому, что тот обеспечивает более или менее стандартное заполнение шаблона, а также реальное распределение букв и пробелов в абзацах, которое не получается при простой дубликации "Здесь ваш текст.. Здесь ваш текст.. Здесь ваш текст.." Многие программы электронной вёрстки и редакторы HTML используют Lorem Ipsum в качестве текста по умолчанию.</p>
			</div>
			<div class="tab" id="tab2">
				<p>Вкладка 2. Многие думают, что Lorem Ipsum - взятый с потолка псевдо-латинский набор слов, но это не совсем так. Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад. Ричард МакКлинток, профессор латыни из колледжа Hampden-Sydney, штат Вирджиния, взял одно из самых странных слов в Lorem Ipsum, "consectetur", и занялся его поисками в классической латинской литературе.</p>

                <p>Есть много вариантов Lorem Ipsum, но большинство из них имеет не всегда приемлемые модификации, например, юмористические вставки или слова, которые даже отдалённо не напоминают латынь. Если вам нужен Lorem Ipsum для серьёзного проекта, вы наверняка не хотите какой-нибудь шутки, скрытой в середине абзаца. Также все другие известные генераторы Lorem Ipsum используют один и тот же текст, который они просто повторяют, пока не достигнут нужный объём. Это делает предлагаемый здесь генератор единственным настоящим Lorem Ipsum генератором.</p>
			</div>
			<div class="tab" id="tab3">
				<p>Вкладка 3. Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться. Lorem Ipsum используют потому, что тот обеспечивает более или менее стандартное заполнение шаблона, а также реальное распределение букв и пробелов в абзацах, которое не получается при простой дубликации "Здесь ваш текст.. Здесь ваш текст.. Здесь ваш текст.." Многие программы электронной вёрстки и редакторы HTML используют Lorem Ipsum в качестве текста по умолчанию, так что поиск по ключевым словам "lorem ipsum" сразу показывает, как много веб-страниц всё ещё дожидаются своего настоящего рождения.</p>

				<p>Классический текст Lorem Ipsum, используемый с XVI века, приведён ниже. Также даны разделы 1.10.32 и 1.10.33 "de Finibus Bonorum et Malorum" Цицерона и их английский перевод, сделанный H. Rackham, 1914 год.</p>
			</div>
		</div>

</body>

</html>

dima_riabets · #3 (**permalink**) 07.12.2015, 00:48

Спасибо большое!

Форум

Справочник

Discord чат

Курсы javascript