Новости

Как правильно применять в JavaScript асинхронные функции: примеры работы с ES 2017
От автора: возможность писать на JavaScript асинхронные функции является важным обновлением в ES2017. Что такое асинхронные функции? Асинхронные функции — это функции, которые возвращают promise. Мы

WordPress JavaScript — как правильно подключить файл скрипта к шаблону сайта
Использование в шаблонах WordPress JavaScript скриптов давно стало обычным делом. Их подключение возможно несколькими способами, начиная с классического варианта с использование голого HTML. Но чтобы все

Как исправить JavaScript error "ВКонтакте"? Что делать при ошибках JavaScript в "ВКонтакте"?
"ВКонтакте" - это на сегодняшний день самый удобный русскоязычный ресурс, который является не только популярнейшей социальной сетью, но и сервисом для прослушивания аудиозаписей и просмотра видео. Здесь

Правильное использование Tor Browser
Tor Browser полностью анонимен – Миф или реальность? Многие считают, что Tor — это полностью анонимное и безопасное средство для интернет-серфинга, которое не дает никому возможность контролировать то,

Javascript error object is not a function вконтакте как исправить
"ВКонтакте" - это на сегодняшний день самый удобный русскоязычный ресурс, который является не только популярнейшей социальной сетью, но и сервисом для прослушивания аудиозаписей и просмотра видео. Здесь

Как исправить ошибку javascript error вконтакте
На сегодняшний день «Вконтакте» является наиболее удобным русскоязычным ресурсом, который представляет собой не только крупнейшую социальной сеть, но и сервис для просмотра видео и прослушивания аудиозаписей.

Что такое JavaScript и для чего он используется?
Подробности декабря 10, 2015 Просмотров: 20225 В интернете миллионы веб-страниц,

Практика javascript синтаксис написания
Javascript — это язык программирования, который активно используется для построения динамических веб страниц. Собственно с этой целью он и был изобретен. У нашего с вами языка еще есть такое интересное

JavaScript учебник
Код функций в JavaScript начинает выполнение после их вызова. Функции являются одним из наиболее важных строительных блоков кода в JavaScript. Функции состоят из набора команд и обычно выполняют

Рекомендации решившим начать изучать JavaScript
Если вы решили начать изучать JavaScript , то эта статья для вас. Надеюсь, что её прочтение избавит вас в будущем от множества ошибок и сделает его изучения более простым, быстрым и эффективным. В статье

JQuery tabs. Простые jQuery вкладки

Опубликовано: 01.09.2018

видео jQuery tabs. Простые jQuery вкладки

jquery tutorials for beginners - 53 - jquery tabs

Если у вас есть большое количество информации, но свободное место на сайте отсутствует, то лучшим решением этой проблемы будет создание   jQuery  tabs. jQuery вкладки скрывают часть контента, занимая при этом значительно меньше места.


jQuery Tutorial #5 - Building a jQuery Tab Panel Widget

1. Для начала необходимо создать HTML структуру для будущих вкладок.

<h1>Простые вкладки</h1> <ul id="tabs"> <li><a href="#description">Описание</a></li> <li><a href="#photos">Фото</a></li> <li><a href="#details">Подробное описание</a></li> <li><a href="#reviews">Обзоры</a></li> <li><a href="#related">Товары</a></li> </ul> <div class="tabs-block"> <div id="description" class="tab-section"> <h2>Описание</h2> <p>Этот раздел содержит описание товаров.</p> </div> <div id="photos" class="tab-section"> <h2>Фото</h2> <p>Этот раздел содержит фотографии товаров.</p> </div> <div id="details" class="tab-section"> <h2>Подробное описание</h2> <p>Этот раздел содержит подробное описание – размер, вес, цвет, материалы и т.д.</p> </div> <div id="reviews" class="tab-section"> <h2>Обзоры</h2> <p>Этот раздел содержит обзоры товаров</p> </div> <div id="related" class="tab-section"> <h2>Товары</h2> <p>Этот раздел содержит список покупаемых товаров.</p> </div> </div>

 


jQuery tabs in asp net

Данный HTML код начинается со списка, состоящего из ссылок. Щелкая по данным ссылкам, в конечном итоге, будет отображаться соответствующий <div> контейнер, все остальные контейнеры будут скрыты.

2. Теперь необходимо использовать jQuery для скрытия <div> контейнеров. Для этого пропишем в подключаемом файле scripts.js следующий код:

$(document).ready(function(){ $('.tab-section').hide(); });

 

Теперь, после загрузки страницы, пользователь увидит только список, состоящий из ссылок!

3. Затем, мы должны предотвратить срабатывание ссылки , когда по одной из них будет произведен щелчок. Для этого привяжем функцию к ссылкам.

$(document).ready(function(){ $('.tab-section').hide(); $('#tabs a').bind('click', function(e){ e.preventDefault; }); });

 

Теперь при клике по ссылке, переход по ней производиться не будет, собственно, за это действие и отвечает preventDefault .

4. Далее, необходимо сделать так, чтобы при клике по ссылке отображалось соответствующий контейнер с контентом. Для этого добавим $(this.hash).show() перед e.preventDefault из предыдущего пункта.

 

$(document).ready(function(){ $('.tab-section').hide(); $('#tabs a').bind('click', function(e){ $(this.hash).show(); e.preventDefault; }); });

 

Конструкция $(this.hash).show() означает, что при клике по ссылке, необходимо отобразить контейнер, id которого совпадает со значением href ссылки. Hash – возвращает значение href ссылки. Другими словами, если вы кликаете по ссылке, у которой параметр href="#description”, то конструкция $(this.hash).show() будет равносильна $(#description).show() .

5. Теперь, если кликнуть на какую-нибуть ссылку, то отобразиться связанный с ней контейнер. Однако, если продолжать кликать по другим ссылкам, новые контейнеры станут видимыми, а старые не исчезнут. Давайте исправим это, добавив конструкцию $('.tab-section:visible').hide() , которая означает, что при клике видимые элементы с классом tab-section должны исчезнуть:

 

$(document).ready(function(){ $('.tab-section').hide(); $('#tabs a').bind('click', function(e){ $('.tab-section:visible').hide(); $(this.hash).show(); e.preventDefault; }); });

 

6. Все, основной код для jQuery tabs написан и вкладки имеют законченный вид. Осталось только добавить css стили в подключаемый файл styles.css :

 

.tabs-block { border: 2px solid #ccc; margin-top: -2px; } #tabs { overflow: hidden; margin: 0; padding: 0; } #tabs li { display: block; list-style: none; float: left; } #tabs li a { display: block; padding: 2px 5px; border: 2px solid #ccc; border-bottom: 0 none; text-align: center; text-decoration: none; } .tab-section { padding: 10px; } #tabs li a.current { background: #fff; color: #000; }

 

7. После добавления стилей, вкладки стали красиво выглядеть, но непонятно какая из них активна в данный момент. Исправить это можно, добавив специальный класс к активной вкладке:

 

$(document).ready(function(){ $('.tab-section').hide(); $('#tabs a').bind('click', function(e){ $('#tabs a.current').removeClass('current'); //Убираем класс после клика $('.tab-section:visible').hide(); $(this.hash).show(); $(this).addClass('current'); //Добавляем класс после клика к той ссылке, по которой был произведен клик e.preventDefault; }); });

 

В файл стилей styles.css добавим класс:

 

#tabs li a.current { background: #fff; color: #000; }

 

8. Последний штрих: сделаем так, чтобы при загрузке страницы первая jQuery вкладка стала активной. Добавим filter(':first').click() :

 

$(document).ready(function(){ $('.tab-section').hide(); $('#tabs a').bind('click', function(e){ $('#tabs a.current').removeClass('current'); $('.tab-section:visible').hide(); $(this.hash).show(); $(this).addClass('current'); e.preventDefault; }).filter(':first').click(); });

 

При помощи фильтра и псевдокласса first , мы произведем автоматический клик по первой вкладке, сразу же после загрузке страницы. Наши jQuery вкладки готовы!

 

Демо Скачать [27,34 Kb] (cкачиваний: 382)

rss