Как отображать в адресной строке табы bootstrap?

Question

[sh1ftyshmifty]

Добрый вечер.
В bootstrap при клике на вкладке(tab), в адресной строке браузера ничего не меняется. Нужно, чтобы появлялся id таба и по получившейся ссылке можно было перейти на данный таб.

Спасибо.

Comments

[sh1ftyshmifty]

Товарищи, вопрос открыт. Буду очень признателен тому, кто поможет!

Answer 1

[Сергей Мельников]

jsbin

Comments

[sh1ftyshmifty]

Огромное спасибо, Сергей!

Answer 2

[Maksim Zverev]

if (location.hash !== '') {
    $('.nav-tabs a[href="' + location.hash.replace('tab_','') + '"]').tab('show');
} else {
    $('.nav-tabs a:first').tab('show');
}

$('.nav-tabs a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
      window.location.hash = 'tab_'+  e.target.hash.substr(1) ; 
      return false;
});

Answer 3

[bkosun]

Примерно так:

// Расширяем JQuery для получения GET параметров с URL
$.extend({
    getUrlVars: function(){
        var vars = [], hash;
        var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
        for(var i = 0; i < hashes.length; i++)
        {
            hash = hashes[i].split('=');
            vars.push(hash[0]);
            vars[hash[0]] = hash[1];
        }
        return vars;
    },
    getUrlVar: function(name){
        return $.getUrlVars()[name];
    }
});

// Если присутствует $_GET['act'] активируем вкладку с нужным идентификатором
$(function () {
    if (typeof $.getUrlVar('act') != 'undefined')
        if (typeof $('a[href="#' + $.getUrlVar('act') + '"]') != 'undefined')
            $('a[href="#' + $.getUrlVar('act') + '"]').tab('show');
});

При клике по вкладке, добавляем в URL параметры с нужным идентификатором

Comments

[sh1ftyshmifty]

т.е. просто вставить этот скрипт? У меня есть табы: one, two, three. Их тоже в скрипт добавлять? Извиняюсь, начал js учить буквально на днях и подобные скрипты для меня слишком сложны пока.

[bkosun]

sh1ftyshmifty: можно просто вставить, в таком случае, при переходе по ссылке типа: example.com/index.php?act=two - будет активная вкладка two

А можно изменить на свое усмотрение ;)

Answer 4

[sh1ftyshmifty]

Всё перепробовал. Наверное, я не так объяснил.
Табы реализованы не через список, а кнопками

<div class="btn-group-lg" >
                    <button type="button" class="btn btn-success">
                        <a href="#one" data-toggle="tab"> Первый</a>
                    </button>
                   <button type="button" class="btn btn-success">
                        <a href="#two" data-toggle="tab"> Второй</a>
                    </button>
<div>

Соответственно, сами вкладки

<div class="tab-pane active" id="one">Текст 1 вкладки</div> 
<div class="tab-pane" id="two">Текст 2 вкладки</div>

Answer 5

[Александр Токмаков]

if (location.hash === '#nav-profile') {
                $('#nav-profile-tab').tab('show');
            }
            $('.nav-tabs .nav-link').on('shown.bs.tab', function (e) {
                window.location.hash = $(this).data('bs-target');
            })