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

Привет!
Подскажите, пожалуйста, как открывать вкладки в 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