Bootstrap и его табы: переход к якорю на другой вкладке, открыть другую вкладку

531

15 декабря 2016, 16:19

Просмотрел множество тем и попробовал внедрить некоторый код js, с грехом пополам работает:

(function($) {
$(function() {
    var hash = window.location.hash;
    $('.nav-tabs a[href="' + hash + '"]').tab('show');
})
})(jQuery)

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)

Answer 1

2 ваши ссылки:

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: К вашей ссылке

<a href="/index.php/otdykh/sapogi#extra">Фото сапоги</a>

Добавьте css-класс:

<a href="/index.php/otdykh/sapogi#extra" class="extra-tab">Фото сапоги</a>

И когда jQuery загружен (т.е. внутрь $(function() { под вашим кодом) добавьте еще js-код для обработки клика по ссылке:

$( ".extra-tab" ).click(function( event ) {
    $('.nav-tabs a[href=#extra]').tab('show'); //Открываем таб extra
    document.location.href = $(this).attr('href');  //меняем хэш урла
    return false;
});