2

Просмотрел множество тем и попробовал внедрить некоторый код 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)

1 ответ 1

2

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;
});
4
  • К сожалению js для меня темный лес, как прикрутить это событие для меня непонятно, считай для этого надо начинать с нуля учить язык, может что подскажет что и куда дописать?
    – DeDMazday
    Commented 2 авг. 2015 в 11:23
  • @DeDMazday добавил в ответ один из вариантов обработчика клика по ссылке для открытия таба. Пробуйте.
    – jekaby
    Commented 3 авг. 2015 в 7:12
  • На самом деле с момента написания код несколько видоизменился (не меняя сути), получился вот такой код (с Вашими изменениями), Добавил в конец вопроса, правда конструкция не работает, т.е. таб на текущей странице так и не открывает. Ссылка <a class="extra-tab" href="index.php/otdykh/palatka#extra">Открыть фото</a>
    – DeDMazday
    Commented 3 авг. 2015 в 11:07
  • Извиняюсь, ошибочка, там где a[href=extra] заменить на a[href=#extra]
    – jekaby
    Commented 3 авг. 2015 в 12:11

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.