Как дать прямую ссылку на одну из вкладок, управляемых JS?

Question

[Александр Лебедев]

Ситуация: у меня есть сайт с вкладками/табами (на базе шаблона bit.ly/1qe7XjI), которые управляются через JS. То есть, я могу получить ссылку на них через "xxx.xx/#якорь", но работать такая ссылка не будет - вкладка не откроется, меня переведет вверх сайта, как будто я использую просто "#".

Задача: мне нужно понять, как сделать так, чтобы при переходе по ссылке "xxx.xx/#якорь" пользователь попал на нужную открытую вкладку. Буду благодарен за совет.

JS:

/* fading the content in using a sub-menu */
    $('.content-fade-menu a').click(function(){
        var href = $(this).attr('href');
        var target = $('.content-fade').find(href);
        $('.content-fade-menu a').removeClass('active');
        $(this).addClass('active');
        $('.content-fade .content-fade-panel').hide();
        $(target).fadeIn('fast');
        return false;
    });

HTML меню:

<ul class="sub-menu content-fade-menu">
<li><a href="#pi" class="">Personal Injury</a></li>
<li><a href="#employment" class="active">Employment</a></li>
</ul>

HTML активной и неактивной вкладки:

<div class="content-fade">
<div class="content-fade-panel" id="pi" style="display: none;">
Non-active tab
</div> 
<div class="content-fade-panel" id="employment" style="display: block;">
Active tab
</div> 
</div>

Спасибо.

Answer 1

[Lisonok]

Добавьте куда-нибудь, должно работать

var loc = window.location.hash;
if (loc != "") {
        var href = loc;
        var target = $('.content-fade').find(href);
        $('.content-fade-menu a').removeClass('active');
        $('.content-fade-menu a[href="'+href  +'"]').addClass('active');
        $('.content-fade .content-fade-panel').hide();
        $(target).fadeIn('fast');
}

Comments

[Александр Лебедев]

А можете кратко пошагово пояснить смысл, пожалуйста? То есть, я не понимаю логики, по которой это может работать.

[Lisonok]

var loc = window.location.hash;
получаем тот самый хэш "#id"
если хэш не пустой, то просто делаем активной вкладку с id равным хэшу

[Александр Лебедев]

Понял, то есть, это специальная команда для получения значения после "#". А если после хеша будут еще utm-метки, знаки вопроса и т.п.?

[Lisonok]

обычно хэш идет в самом конце
http://www.google.com:80/search?q=javascript#test
window.location.hash вернет "#test"
javascript.ru/window-location

[Александр Лебедев]

Понятно. Спасибо, работает :)

[Александр Лебедев]

P.S. А не подскажете, как сделать, чтобы при открытии нужной вкладки, оно чуть прокручивалось вверх (на 40-50 пикселей)? Я к тому, что при открытии с ссылки с хештегом оно открывается на уровне меню, а заголовок-то выше меню.

[Александр Лебедев]

demos.flesler.com/jquery/scrollTo - вот что я нашел. Но пока не понимаю, к какому объекту это применять.

[Александр Лебедев]

Додумался, но не знаю, как убрать анимацию - она обязательный элемент?

[Александр Лебедев]

var loc = window.location.hash;
if (loc != "") {
var href = loc;
var target = $('.content-fade').find(href);
$('.content-fade-menu a').removeClass('active');
$('.content-fade-menu a[href="'+href +'"]').addClass('active');
$('.content-fade .content-fade-panel').hide();
$(target).fadeIn('fast');

var zagolovok = $(target).find('h3');
$('html, body').animate({scrollTop: $(zagolovok).offset().top}, 300);
}

[Lisonok]

$('html, body').animate({scrollTop: $(zagolovok).offset().top}, 300);

300 - это время анимации в миллисекундах, поставьте 0

[Александр Лебедев]

Пробовал, то же самое) Не суть, в общем. Все работает, большое спасибо :)

Answer 2

[Александр Лебедев]

Теоретически, я понимаю, что скрипт должен при старте проанализировать url на наличие #якоря, и если якорь есть, то распознать его как "href" и совершить действие "click" самостоятельно. Но вот с реализацией у меня проблемы)

Answer 3

[Иван]

yandex.ru/yandsearch?text=jquery+tabs+%D1%81+%D1%8...

Comments

[Александр Лебедев]

Прочел весь api.jqueryui.com/tabs/, не нашел/не понял. Ткните пальцем?)

[Иван]

@sortarage вы же не используете jquery-ui, причем тут он? По этому запросу как минимум 6 и 8 ссылки — то, что вам нужно

Answer 4

[Sinner3]

Похожая проблема не могу адаптировать код под свою верстку:

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    <ul class="bxr-detail-tabs hidden-xs">
        <li data-tab="detail">
            Описание
        </li>         
        <li data-tab="video">
            Видео
        </li>        
        <li data-tab="screenshots" class="active">
            Скриншоты
        </li>    
        <div class="clearfix"></div>
    </ul>
    <h3 class="bxr-detail-tab-mobile-title  hidden-lg hidden-md hidden-sm">Описание</h3>
    <div class="bxr-detail-tab bxr-detail-text" data-tab="detail" style="display: none;">
        Текст описания
    </div>
                     
    <h3 class="bxr-detail-tab-mobile-title  hidden-lg hidden-md hidden-sm">Видео</h3>
    <div class="bxr-detail-tab bxr-detail-text" data-tab="video" style="display: none;">
        Вставка видео
    </div>
    
    <h3 class="bxr-detail-tab-mobile-title hidden-lg hidden-md hidden-sm">Скриншоты</h3>
    <div class="bxr-detail-tab bxr-detail-review" data-tab="screenshots" style="display: block;">
    компонент вывода скриншотов
    </div>                
</div>
<script>
var loc = window.location.hash;
if (loc != "") {
        var href = loc;
        href = href.replace('#','');	
		var target = $('.bxr-detail-tab').find(href);
        $('.bxr-detail-tabs li').removeClass('active');
		$('.bxr-detail-tabs li[data-tab="'+href+ '"]').addClass('active');
        $('.bxr-detail-tab').hide();
		$(target).fadeIn('fast');
}
</script>

класс 'active' присваивается, но вкладка не открывается

Answer 5

[Александр Бабич]

Так же нужно было реализовать, все отлично работает. Спасибо Lisonok
Но клиент попросил еще одно внедрить.
Как сделать 2 якоря? К примеру сразу переходим на нужную вкладку index.html#tab3, и в этой вкладке так же есть меню, и нужно перейти к ценам. Тоесть ссылка на нужный блок в вкладке index.html#tab3_price. Но так не работает. А работает только на вкладку index.html#tab3.
А нужно по типу index.html#tab3#tab3_price
Понимаю что бред наверное, но все же может кто сталкивался или знает как реализовать?

Answer 6

[Яна Митрофанова]

$(function() {
    if (window.location.hash.length > 0) {
        $('a[href="' + window.location.hash + '"]').click();
    }
}

Answer 7

[kozak1981]

Подскажите как сделать тоже самое, только код у меня другой :

<script language="JavaScript1.2">
$(document).on("click", ".naccs .menu div", function() {
	var numberIndex = $(this).index();

	if (!$(this).is("active")) {
		$(".naccs .menu div").removeClass("active");
		$(".naccs ul li").removeClass("active");

		$(this).addClass("active");
		$(".naccs ul").find("li:eq(" + numberIndex + ")").addClass("active");

		var listItemHeight = $(".naccs ul")
			.find("li:eq(" + numberIndex + ")")
			.innerHeight();
		$(".naccs ul").height(listItemHeight + "px");
	}
});
</script>

<div class="naccs">
  <div class="grid">
   <div class="gc col-lg-3 col-md-3 col-sm-3 col-xs-12">
    <div class="menu">
     <div class="active"><span class="light"></span><span>Пункт 1</span></div>
     <div><span class="light"></span><span>Пункт 2</span></div>   
    </div>
   </div>
  </div>
   </div>
<div class="gc col-lg-9 col-md-9 col-sm-9 col-xs-12">
    <ul class="nacc">
     <li class="active">
      <div>
       <p>
	</p><h2 align="center">Зарегистрируйтесь и получайте выгоду:</h2>
		  <div><div>
Текст 1
</li>
<li>
      <div>
       <p>
	</p><h2 align="center">Зарегистрируйтесь и получайте выгоду:</h2>
		  <div><div>
Текст 2
</li>
</div></div></div></div>