Вступление Мое знакомство с фреймворком jQuery произошло в 2008-м году, после того, как, однажды, на одном из англоязычных сайтов я нашел jQuery-скрипт, который позволяет создавать блоки с удобными вкладками. Этому скрипту я посвятил отдельный пост на данном блоге. С тех пор прошло 2 года, ...
Внимание! Нижеизложенная статья на данный момент не актуальна. Вместо нее читайте статью “Универсальный jQuery-скрипт для блоков с вкладками (табами)“. * * * Примерно последние месяц-два на англоязычных блогах мне стали ...
Предлагаю вашему вниманию скрипт, который плавно прокручивает страницу наверх при клике на соответствующую ссылку. Я сделал 2 варианта: на чистом JavaScript и на jQuery. Выбирайте тот, который вам больше по ...
На своем другом блоге я недавно объяснил, почему в данный момент кнопка “Google +1” не может быть добавлена в моем сервисе Share42.com, о чем все просят. Однако прямо сейчас на ...
Внимательные пользователи моего сайта Share42.com заметили, что на нем с определенной поры появились красивые всплывающие подсказки, и меня попросили рассказать, как такое сделать. Поэтому я хочу поделиться с вами моим ...
Комментарии (978)
Здравствуйте! Подскажите, пожалуйста, как решить проблему?
Поставила скрипт из первого примера. Все работает. Далее подключаю скрипт с небольшой анимацией. Анимация работает, а табы нет. Как решить конфликт?
Подключаю так:
Скрипт с анимацией должен быть в первом табе, выглядит так:
$(function(){
$(“.img1,.txt1,.img2,.txt2,.img3,.txt3,ul”).hide();
$(“.img1”).delay(800).fadeIn(800);
$(“.txt1″).delay(800).fadeIn(500).animate({fontSize:”42px”},”slow”).animate({fontSize:”34px”},”slow”);
$(“.img2,.txt2”).hide();
$(“.img2”).delay(2500).fadeIn(800); $(“.txt2″).delay(2400).fadeIn(500).animate({fontSize:”42px”},”slow”).animate({fontSize:”34px”},”slow”);
$(“.img3,.txt3”).hide();
$(“.img3”).delay(3900).fadeIn(800); $(“.txt3″).delay(3800).fadeIn(500).animate({fontSize:”42px”},”slow”).animate({fontSize:”34px”},”slow”);
$(“.txt1”).click(function(){
$(“.garanty”).toggle(10);
});
$(“.txt2”).click(function(){
$(“.servis”).toggle(10);
});
$(“.txt3”).click(function(){
$(“.sroki”).toggle(10);
});
})(jQuery)
Не сильна в js, поэтому извините, если вопрос дурацкий
Здравствуйте!
Странное дело, на одном блоге скрипт прекрасно работает, а на другом никак не хочет.
У меня имеется догадка, что дело в конфликте скрипта с функцией постраничной навигации, где также используется класс “current”.
Скажите пожалуйста, может ли вообще такой конфликт иметь место или это нереально?
И второй вопрос. Есть ли в wordpress альтернатива классу “current”?
Это нереально, т.к. классы – это CSS. Причина скорее в конфликте с другими скриптами.
Вопрос непонятен.
поменяйте имя класса с current на current2 или на любое другое слово которое не создаст конфликт.
не забудьте поменять его в яваскрипте.
Щикарный скрипт! подходит для любой задачи, а главное без лишнего мусора. Автор, низкий поклон тебе.
Добрый день отличный скрипт спасший мне кучу времени! Такой вопросик возможно ли расположение кнопок переключения табов на месте в блоках. Содержанием блоков будут картинки которые меняются а поверх картинок на заданом месте висят кнопки. Заранее спасибо!
С помощью CSS можно много чего сделать.
Честный ответ! :) спасибше!
Подскажите пожалуйста, а как сделать чтобы переход между вкладками осуществлялся при нажатии на кнопку!
Круто, спасибо то что искал, и без UI !!!
Здравствуйте! Огромное спасибо! Но немного не универсален тем, что на разных страницах сохраняется одно и тоже значение, и в итоге на разных страницах выводится вкладка под тем номером, под которым сохранено на какой-то одной. Не подскажите как решить проблему?
Я не знаю, как такое провернуть.
var tab = $(‘body’).attr(‘class’); //уникальный для страницы класс
и заменил все ‘tab’ на эту переменную) Вроде работает.
Появился другой вопрос, можно ли как-то по закрытию вкладки, переходу на другую страницу сделать удаление localStorage? Или на крайний случай хотя бы по закрытию браузера?
Teens McLagen сможете ли Вы полный код скинуть? Не совсем понятно как Вы это реализовали…
Автор сайта не подскажете? Teens McLagen получит на е-майл текст моего комментария?
Получит. Он подписан на комментарии.
Dimox может Вы поняли как он это провернул?
Нет. Я уже писал выше.
Здравствуйте Teens McLagen, большое спасибо за скрипт, но почему-то он у меня не работает, Вы прописали всё полностью так как он у Вас используется?
Вот, держите =) Возможно вы не поняли, что класс должен быть уникальным для страницы, он как бы идентифицирует ее, в моем случае мне нужно было прицепить именно на #content, но логичнее будет дать класс для body, либо id и по нему определять =) Причем если класс page1 присутствует на одной странице, на другой ни такого класса, ни такого идентификатора быть не должно =)
https://www.dropbox.com/s/234h4xyx2k1aiyi/tabs_localstorage.zip
Как получите – отпишитесь, чтобы удалил файл =)
Большое спасибо, а Вы фрилансом не занимаетесь?
Не за что, рад помочь точно так же, как и мне помогают =)
А вас что-то именно интересует?
Я бы хотел предложить Вам поработать вместе, я занимаюсь разработкой сайтов в г. Астана, Республика Казахстан, мой сайт http://e.ayn.kz, напишите на мой е-майл aynkz@mail.ru со своего е-майла или добавьте меня в скайп ayn.kz, если заинтересованы предложением.
Добрый вечер!
Вы круто организовали, хотел себе так же, но вы уже удалили ссылку((((
Пожалуйста, можете ещё снова выложить. Очень важно мне иметь такой таб.
Добрый день
столкнулся с не совсем стандартной проблемой:
у меня там со скрол баром, стандартный он явно не вписывается в таб, при попытке его изменить с помощью различных jq плагинов вот один из них (http://habrahabr.ru/company/2gis/blog/169359/) активный таб загружается корректно, но при переключении просто ничего не подгружает, обновляешь страницу- все повторяется, можно ли сделать чтоб при переключении таба подгружался и плагин меняющий скролл бар?
Ничем не могу помочь.
знаешь того, кто может?
Добрый день! спасибо большое за рекомендации! а Вы могли бы, как для новичка, подсказать между какими символами общего html-кода блога вставлять рекомендованные скрипты. помогите пожалуйста!!
Смотрите код примеров.
спасибо!.. посмотрела, сам html-код в примере я нашла, а со скриптом
(function($) {
$(function() { ……………………и т.д.
не могу понять, что с ним делать и куда сохранять((((((
Поищите тогда в Интернете информацию о том, как вставлять скрипты на сайт.
а можно подключить этот скрипт через встроенный способ?
Конечно можно, все что можно подключить отдельным файлом, можно записать сразу в код)
Спасибо!)
походу автор сам не але, совсем, смотрю ответы – не чем не могу помочь, не знаю итд итп, отвечает на самое банальное. Походу скрипт слямзал откуда-то
задал простенький вопрос, для тех кто в js шарит расплюнуть, он – не чем не могу помоч, походу сам не знает.
Логично. Если бы я знал, то помог бы.
Как сделать так, чтобы по клику на кнопку активного таба он закрывался обратно?
Решил задачу добавлением такого кода, но сомневаюсь, что это лаконичный и правильный путь
Здравствуйте!
Подскажите пожалуйста, а можно ли сделать табы внутри табов?
Т.е. к примеру, внутри горизонтальных табов сделать вертикальные табы?
Заранее благодарен за помощь.
Можно. Решение здесь.
Спасибо большое!)
+ Интересно знать как можно реализовать скроллинг табов.
Спасибо.
В данном скрипте такого нет.
Да я понял, но было бы кстати, так как при превышении определенного количества вкладок, для каждого сайта разумеется это свое определенное кол-во, это смотрится уже не очень.
Я вот проверил у меня где-то 6-7 вкладок, а потом идет 2 ряд, но это уже не красиво, так как бывают искажения содержимым вкладок.
Все равно спасибо за простой скрипт!
Ведь всегда хочется большего!))
Спасибо за скрипт, юзаю на своих проектах.
Подскажи что необходимо дописать/подправить в js что бы при нажатии на второй таб, информация выводилась сразу по двум табам? тоесть сделать 2 таба активными, а что бы деактивировать, необходимо еще раз нажать на соответствующий таб. и так к примеру вывести информацию только по нужным табам?
вариант с куками не работают в гугл хром, если подключен jquery-1.11.0. Есть решение?
Спасибо за материал! Весьма полезен, реализовано минимально и с толком, ресурсы в норме, а это главное!
Здравствуйте, подскажите, в чем ошибка (использовал 3 вариант скрипта): изменил в JS названия блоков, CSS почти не менял, но ничего не работает
Проверил этот код – у меня он работает без проблем, так что не знаю, в чем дело.
В том-то и дело, в отдельном файле, когда я только скачал пример, все работало. Как только поставил себе на сайт, работать перестало.
Причина где-то у вас на сайте.
Может быть, из-за того, что я положил файл с JS кодом папку и оттуда его подключил через PHP. А при подключении с с путями что-то произошло?
Переместил вкладки вниз. Работает, но сделать бы еще переход к началу страницы, т.е. иначе где-то по середине страницы открывается вкладка, если текста мало.