Bootstrap и его табы: переход к якорю на другой вкладке, открыть другую вкладку
https://jsfiddle.net/MasterAlex/wxnaf15v/2/ При ссылке с другой страницы он действительно открывает таб, на который указывает ссылка вида a href=»index.php/mytxt#tabnew» , а внутри одной страницы перехода не происходит, другой таб упрямо не открывается. Что я неправильно делаю или где ошибка? Собственно сайт, ссылки ‘открыть фото’ и ‘фото сапоги’.
(function($) < $(function() < var hash = window.location.hash; $('.nav-tabs a[href="' + hash + '"]').click().tab('show'); // Сдвигаем точку анкора вниз setTimeout(function() < var h = (window.innerHeight ? window.innerHeight : (document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.offsetHeight))/4, top = window.pageYOffset != undefined ? window.pageYOffset : function() < var doc = document.documentElement || document.body, off = doc.scrollTop || doc && doc.scrollTop || 0; return off -= doc.clientTop; >; window.scrollTo(0, top-h); >, 200); >) $(function() < $( ".extra-tab" ).click(function( event ) < $('.nav-tabs a[href=extra]').tab('show'); //Открываем таб extra document.location.href = $(this).attr('href'); //меняем хэш урла return false; >); >); >)(jQuery) Отслеживать
задан 12 июл 2015 в 17:50
21 1 1 серебряный знак 4 4 бронзовых знака
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
http://travelsbase.ru/index.php/otdykh/palatka#extra http://travelsbase.ru/index.php/otdykh/sapogi#extra
Вторая ведёт на совершенно другую страницу, поэтому другая страница и открывается. Первая же ссылка только меняет хэш урла, но таб открывать не будет. Т.к. для открытия таба должен отработать javascript-код и сделать одному блоку hide(), а другому show(). А обработчик onClick у вас не добавлен.
Вам нужно испавить javascript-ошибку, смотрите в консоли:
Uncaught TypeError: $(. ).ready is not a function Ваш код будет открывать таб только при загрузке страницы по текущему хэшу:
var hash = window.location.hash; $('.nav-tabs a[href="' + hash + '"]').tab('show');
Чтобы при клике по ссылке открывать нужный таб, вам нужно повесить onClick событие на ссылку и в обработчике для нужного таба вызывать .tab(‘show’);
UPD: К вашей ссылке
$( ".extra-tab" ).click(function( event ) < $('.nav-tabs a[href=#extra]').tab('show'); //Открываем таб extra document.location.href = $(this).attr('href'); //меняем хэш урла return false; >);
Как открыть вкладку Bootstrap tabs через JS
Если требуется сделать возможность открыть какую либо вкладку в Bootstrap tabs из вне, например по отдельной ссылке или по хешу страницы, возможны следующие варианты.
Разметка табов имеет следующий вид:
Для открытия вкладки предназначен метод .tab(‘show’) , назначаемый по селектору:
$('.nav-tabs a[href="#tab-2"]').tab('show'); // По id вкладки $('.nav-tabs li:first a').tab('show'); // Первая вкладка $('.nav-tabs li:last a').tab('show'); // Последняя вкладка $('.nav-tabs li:eq(1) a').tab('show'); // 2-я вкладкаУстановка Bootstrap — Bootstrap 5: Основы верстки
Театр начинается с вешалки, а использование Bootstrap начинается с подключения к странице. Подключение происходит одним из нескольких доступных способов: от подключения готовых файлов CSS и JS до использования SASS препроцессора с возможностью подключения нужных компонентов.
Подключение с помощью CDN
Перед тем, как изучить подключение через CDN стоит разобраться с тем, что такое CDN.
CDN — сокращение от Content Delivery Network. Чаще всего система CDN представляет собой несколько серверов в разных странах мира. Они хранят в себе файлы, которые можно подключить к проекту. В зависимости от того, где находится пользователь, отдается файл с того сервера, который обеспечит минимальную задержку.
Для подключения Bootstrap с помощью CDN достаточно просто подключить необходимые файлы в HTML. Свежие ссылки для подключения находятся на странице документации Bootstrap. В настоящее время это выглядит следующим образом:
lang="ru"> charset="UTF-8"> name="viewport" content="width=device-width, initial-scale=1.0"> Подключение Bootstrap href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"> В процессе прохождения курса будет описано, какие именно компоненты требуют наличие JavaScript. Если не использовать такие компоненты, то возможно не подключать скрипты к странице, что положительно скажется на скорости загрузки сайта. Этот критерий очень важен при разработке. На него также ориентируются алгоритмы ранжирования сайта в поисковых системах.
Локальное подключение CSS
Разработчики не всегда хотят доверять внешним серверам, которые они не могут контролировать. Никто не может дать гарантию того, что CDN не подведет в самый нужный момент, когда на сайт пришли инвесторы с миллиардами. Чтобы избежать такой ситуации можно расположить все файлы Bootstrap у себя в рабочей директории и подключать их локально.
Скачать все необходимые файлы можно на официальной странице Bootstrap или через репозиторий GitHub . В случае с репозиторием нас интересует директория dist.
Внутри директории dist находится следующая структура CSS файлов:
bootstrap/ ├── css/ │ ├── bootstrap-grid.css │ ├── bootstrap-grid.min.css │ ├── bootstrap-reboot.css │ ├── bootstrap-reboot.min.css │ ├── bootstrap-utilities.css │ ├── bootstrap-utilities.min.css │ ├── bootstrap.css │ └── bootstrap.min.css
В директории css находится больше файлов, чем при подключении Bootstrap через CDN. При таком подходе возможно подключать только необходимые части CSS.
- bootstrap-grid.css. В файле находятся все стили, отвечающие за создание сеток. Если от Bootstrap в проекте необходима только сетка, то данного файла достаточно. В этом случае нет необходимости подключать все остальные зависимости, в том числе и JavaScript.
- bootstrap-reboot.css. Файл, вопреки своему названию не сбрасывает стандартные стили браузеров, как это делает reset.css, а устанавливает стандартные Bootstrap стили для всех элементов.
- bootstrap-utilities.css. Файл содержит все атомарные классы и утилиты Bootstrap. Основные утилиты будут изучены в следующих уроках.
- bootstrap.css. Компиляция всех стилей Bootstrap. Если необходимы все стили, то достаточно подключить именно этот файл. Так же файл содержит стили всех компонентов.
Создадим проект, в котором используется только сетка и утилиты бутстрапа:
lang="ru"> charset="UTF-8"> name="viewport" content="width=device-width, initial-scale=1.0"> Подключение Bootstrap rel="stylesheet" href="bootstrap/css/bootstrap-grid.min.css"> rel="stylesheet" href="bootstrap/css/bootstrap-utilities.min.css"> Открыть доступ
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно
- 130 курсов, 2000+ часов теории
- 1000 практических заданий в браузере
- 360 000 студентов
Наши выпускники работают в компаниях:
Введение
Начните работу с Bootstrap, самым популярным в мире фреймворком для создания быстродействующих мобильных сайтов с загрузочным CDN и шаблонами стартовой страницы.
Быстрый старт
Хотите использовать Bootstrap в своем проекте? Bootstrap – библиотека шаблонов CSS, распространяемая свободно командой сайта MaxCDN. Нужна система управления пакетами или исходники Bootstrap? Посетите страницу загрузок.
CSS
Вставьте этот кусок кода в , перед всеми прочими файлами CSS, для загрузки Bootstrap.
rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">JS
Многие из наших компонентов требуют использования JavaScript. Точнее — им требуются jQuery, Popper.js и наши собственные плагины. Для активации плагинов разместите следующий кусок кода в конце страниц, прямо перед закрывающим