Bootstrap вкладки по отдельны кнопкам?

Question

[Alexandr59]

Привет!
Подскажите, пожалуйста, как открывать вкладки в bootstrap по отдельным кнопкам или ссылкам?
Планирую на первой вкладке сделать навигацию ввиде картинок, при нажатии которых будет открываться нужная вкладка и подчеркиваться пункт основной навигации, чтобы понимать, где сейчас находится пользователь.

Не могу понять документацию.
Пробовал просто копировать a href... со всеми классами как из самих вкладок - не получается.
Всего 1 раз открывает и тем более только содержимое и не подчеркивается активная вкладка. И больше не срабатывает главная вкладка, пока по другим не потыкать.

Нашел код js, но куда его вписывать ? поле каждой ссылки?
Вроде активация:

$('#myTab a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})

и сама навигация

$('#myTab a[href="#profile"]').tab('show') // Select tab by name
$('#myTab a:first').tab('show') // Select first tab
$('#myTab a:last').tab('show') // Select last tab
$('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)

Для удобства:
Статья bootstrap tabs
Мой готовый пример с комментариями на jsfiddle

Answer 1

[Stalker_RED]

Предположим, что пользователь пришел по ссылке http://example.com/something#pills-home
Тогда в location.hash будет #pills-home

А нам нужно активировать таб id="pills-home-tab"

$(document).ready(function(){
  $(location.hash + '-tab').click()
})

https://jsfiddle.net/faqttqfr/4/

UPD: После изменения вопроса: https://jsfiddle.net/q7k58vwz/

Comments

[Alexandr59]

Извиняюсь, неправильно объяснил.
Вопрос в том, как сделать на странице вторую независимую навигацию.
Есть кнопка с якорем или ссылкой, при нажатии на которую будет открыта вкладка.
И причем на основной навигации выбранный пункт отметится (сейчас там идет подчеркивание)

Планирую на первой вкладке сделать навигацию ввиде картинок, они будут направлять на другие вкладки.

\\\
Всем записи отметил Нравится, мой косяк с объяснением..

[Stalker_RED]

Alexandr59, отредактируйте свой вопрос, попытайтесь объяснить что именно вы хотите сделать.

[Alexandr59]

Stalker_RED, все, отредактировал.. Спасибо за ответ.. А сможете подсказать по новому вопросу? сформулировал более правильно

[Stalker_RED]

Alexandr59, не совсем понимаю зачем вы в вопросе разместили куски из документации бутстрапа.
Такое вы пытаетесь сделать? https://jsfiddle.net/q7k58vwz/

[Alexandr59]

Stalker_RED, Да. Все верно. Спасибо! \\\ код из bootstrap выложил, показав, что уже проверил документацию и не разобрался =) исключил отправление меня на справку по бутстрапу и максимально упростить задачу помочь..

[Alexandr59]

Stalker_RED, код js из документации bootstrap ? более подробно изучу. Спасибо!

[Stalker_RED]

Alexandr59, Первые две строчки - jQuery
1. Ищем нужные кнопки (картинки) и вешаем на них обработчик кликов
2. Получаем из data-* аттрибута кнопки название нужного таба

Третья строчка jQuery + метод из бутстрапа. Получаем нужный таб и делаем ему .tab('show') (вот этот кусочек из бутстраповской документации)

Answer 2

[V Sh.]

Попробуй так.
Если будут нужны разъяснения, то задавай вопросы. Но вроде и так понятно, что код делает.