Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Сделать вкладку активной при загрузке страницы (https://javascript.ru/forum/dom-window/52057-sdelat-vkladku-aktivnojj-pri-zagruzke-stranicy.html)

kkolorid 02.12.2014 13:23
Сделать вкладку активной при загрузке страницы
 
Добрый день. Есть страница: sspromo.ru/ticket.php ,тело которой сделано из вкладок, которые открывают части стр... При первом попадании на страницу открывается первая вкладка.

Мне нужно сделать что бы ссылка в верхней основной навигации "О нас" вела на страницу ticket.php, при этом открывалась вкладка CONTACT.

Ссылки у вкладах по типу #tab-1. Делаю такие ссылки в каком то другом месте - ни чего не работает. Возможно будет какое то решение с использованием GET ссылки. Но не могу найти место, где выставить код для вкладки, открывающеюся по умолчанию. Заранее спасибо за помощь.

ruslan_mart 02.12.2014 13:30 
var hash = window.location.hash;
if(hash.indexOf('tab') > 0) {
    var tabID = /tab-(\d+)/.exec(hash).pop();
    document.querySelectorAll('#qcTabNav a')[tabID - 1].click();
}


А если так?

kkolorid 02.12.2014 14:36
Цитата:
Сообщение от Ruslan_xDD (Сообщение 343952) 
var hash = window.location.hash;
if(hash.indexOf('tab') > 0) {
    var tabID = /tab-(\d+)/.exec(hash).pop();
    document.querySelectorAll('#qcTabNav a')[tabID - 1].click();
}


А если так?
А куда сувать, простите? Просто скриптом на страницу? А потом что? Ссылка из навигации должна заработать? Или что? :(

Просто скрипт на стр поставил. Не пашет. Все так же думает, что это обычный якорь. И пишет его в адресную строку...

ruslan_mart 02.12.2014 14:38
kkolorid, поставьте в конец страницы. Или оберните в window.addEventListener('load', function() { код });

Цитата:
Сообщение от kkolorid
А потом что? Ссылка из навигации должна заработать? Или что?
Верно. Ссылки типа:
http://sspromo.ru/ticket.php#tab-1
http://sspromo.ru/ticket.php#tab-2
http://sspromo.ru/ticket.php#tab-3

kkolorid 02.12.2014 14:47
Цитата:
Сообщение от Ruslan_xDD (Сообщение 343962)
kkolorid, поставьте в конец страницы. Или оберните в window.addEventListener('load', function() { код });


Верно. Ссылки типа:
http://sspromo.ru/ticket.php#tab-1
http://sspromo.ru/ticket.php#tab-2
http://sspromo.ru/ticket.php#tab-3
Обернул в window.addEventListener и все получилось. При переходе с других страниц действительно открывается нужная вкладка. Но если я уже нахожусь на странице tickets.php - не работает. Только если обновить страницу с якорем в адресе.

ruslan_mart 02.12.2014 14:52
Попробуйте у себя стереть три последних строчки.

// --------- 5. TESTIMONIAL ----------  //

$('#qcTestimonial p').html($('#qcTestimonialList li a.active').attr('data-content'));
$('#qcTestimonial cite').html('- ' + $('#qcTestimonialList li a.active').attr('data-cite'));
$('#qcTestimonialList li a').hover(function() {
	$('#qcTestimonialList li a.active').removeAttr('class');
	$(this).addClass('active');
	$('#qcTestimonial p').html($(this).attr('data-content'));
	$('#qcTestimonial cite').html('- ' + $(this).attr('data-cite'));
});
$('#qcTestimonialList li a').click(function() {
	return false;
});

kkolorid 02.12.2014 14:57
Цитата:
Сообщение от Ruslan_xDD (Сообщение 343965)
Попробуйте у себя стереть три последних строчки.

// --------- 5. TESTIMONIAL ----------  //

$('#qcTestimonial p').html($('#qcTestimonialList li a.active').attr('data-content'));
$('#qcTestimonial cite').html('- ' + $('#qcTestimonialList li a.active').attr('data-cite'));
$('#qcTestimonialList li a').hover(function() {
	$('#qcTestimonialList li a.active').removeAttr('class');
	$(this).addClass('active');
	$('#qcTestimonial p').html($(this).attr('data-content'));
	$('#qcTestimonial cite').html('- ' + $(this).attr('data-cite'));
});
$('#qcTestimonialList li a').click(function() {
	return false;
});
Стер. Все так же :/

ruslan_mart 02.12.2014 15:00
Ну тогда добавь в мой код:

$('#qcTabNav').on('click', 'a', function() {
    window.location.hash = this.hash;
});

kkolorid 02.12.2014 15:05
Цитата:
Сообщение от Ruslan_xDD (Сообщение 343967)
Ну тогда добавь в мой код:

$('#qcTabNav').on('click', 'a', function() {
    window.location.hash = this.hash;
});
А куда именно? Под условие?

window.addEventListener('load', function() {
var hash = window.location.hash;

if(hash.indexOf('tab') > 0) {

    var tabID = /tab-(\d+)/.exec(hash).pop();

    document.querySelectorAll('#qcTabNav a')[tabID - 1].click();
	
	$('#qcTabNav').on('click', 'a', function() {
    window.location.hash = this.hash;
});

}


});


Вот так не работает... Может сделать просто что бы стр обновлялась?

ruslan_mart 02.12.2014 15:09 
$(function() {
    var hash = window.location.hash;
    if(hash.indexOf('tab') > 0) {
        var tabID = /tab-(\d+)/.exec(hash).pop();
        document.querySelectorAll('#qcTabNav a')[tabID - 1].click();
    }
    $('#qcTabNav').on('click', 'a', function() {
        window.location.hash = this.hash;
    });
});


Вот всё целиком.

kkolorid 02.12.2014 15:12
Цитата:
Сообщение от Ruslan_xDD (Сообщение 343972) 
$(function() {
    var hash = window.location.hash;
    if(hash.indexOf('tab') > 0) {
        var tabID = /tab-(\d+)/.exec(hash).pop();
        document.querySelectorAll('#qcTabNav a')[tabID - 1].click();
    }
    $('#qcTabNav').on('click', 'a', function() {
        window.location.hash = this.hash;
    });
});


Вот всё целиком.
Все по прежнему :/

ruslan_mart 02.12.2014 15:21
Да чтож такое то. :-E 

$(function() {
    var hash = window.location.hash;
    if(hash.indexOf('tab') > 0) {
        var tabID = /tab-(\d+)/.exec(hash).pop();
        document.querySelectorAll('#qcTabNav a')[tabID - 1].click();
    }
    $('#qcTabNav a').on('click', function() {
        window.location.hash = this.hash;
    });
});

kkolorid 02.12.2014 15:28
Цитата:
Сообщение от Ruslan_xDD (Сообщение 343978)
Да чтож такое то. :-E 

$(function() {
    var hash = window.location.hash;
    if(hash.indexOf('tab') > 0) {
        var tabID = /tab-(\d+)/.exec(hash).pop();
        document.querySelectorAll('#qcTabNav a')[tabID - 1].click();
    }
    $('#qcTabNav a').on('click', function() {
        window.location.hash = this.hash;
    });
});
Не выходит. И если оборачивать в window.addEventListener и если просто код выше вставлять..

ruslan_mart 02.12.2014 15:31
kkolorid, ничего оборачивать не нужно, просто замените весь код, который вставляли до этого, на этот.

kkolorid 02.12.2014 15:36
Цитата:
Сообщение от Ruslan_xDD (Сообщение 343981)
kkolorid, ничего оборачивать не нужно, просто замените весь код, который вставляли до этого, на этот.
Заменил. Все так же... Только теперь все вкладки такие ссылки делают. Поэтому якоря срабатывают и вниз кидает


Часовой пояс GMT +3, время: 02:36.