Вкладки Javascript - Как добавить хэштеги в URL? - PullRequest
Новая
       14

Вкладки Javascript - Как добавить хэштеги в URL?

0 голосов
/ 30 мая 2019

Мои вкладки работают нормально, но мне нужна отдельная функция, которая направляет URL-адрес на вкладку, чтобы у меня была отдельная ссылка для каждой вкладки.

Как этого добиться?

url.com / # tab1

url.com / # tab2

Я пробовал много способов, но продолжаю получать неопределенный хэштег.Я хотел бы совет, пожалуйста, я собрал демо, которое показывает полный опыт работы. 

var boxLink = $( '.but' );
var box = $( '.tab' );

boxLink.click( function() {
	$('#but1').removeClass('active');
 
    var boxID = $(this).attr("data-target");
    var currentbox = $('.tab:not(.is-hidden)');
    var targetBox = $('.tab#' + boxID);
    
    if (!$(this).hasClass('active'))    {
        boxLink.removeClass('active');
        $(this).addClass('active');

        TweenMax.to( currentbox, 0.2, {ease:Power4.easeOut, className: '-=visible', autoAlpha: 0,  onComplete: boxIn, onCompleteParams: [targetBox] });
    }
    
    return false;
});

var boxIn = function( targetBox ) {
    box.addClass( 'is-hidden' );
    targetBox.removeClass( 'is-hidden' );
    
    TweenMax.to( targetBox, 0.2, {autoAlpha: 1,className: '+=visible', ease:Power4.easeIn});
}
body {
  background-color:black;
 }
#tab01 {
background: white;
}

#tab02 {
background: red;
} 
 
.tab {
width:100px;
height:100px;
font-size:30px;
line-height:100px;
text-align:center;
}
.is-hidden {
  display: none;
  opacity:0;
  visibility:hidden;
} 

button {
  cursor:pointer;
  padding: 5px;
  margin-top: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tab" id="tab01">one</div>
<div class="tab is-hidden" id="tab02">two</div>

<button  class="but active" id="but1" data-target="tab01">slide 1</button>
<button  class="but" id="but2" data-target="tab02">slide 2</button>

1 Ответ

1 голос
/ 30 мая 2019

Если я вас правильно понял, вы хотите показать конкретную вкладку при загрузке, если хеш был добавлен в URL страницы, верно? Если это так, вы должны проанализировать window.location.href и проверить наличие хеш-тега в URL. Если он присутствует, хеш-значение, например, '# tab2' должен показывать контейнер с тем же идентификатором.

Обновленный код: 

var currentUrl= window.location.href;
if (currentUrl.indexOf('#') > -1) {
  var hashTag= currentUrl.substring(currentUrl.indexOf('#')+1);
  var targetBox = $('.tab#' + hashTag);
  TweenMax.to( currentbox, 0.2, {ease:Power4.easeOut, 
    className: '-=visible', autoAlpha: 0,  onComplete: boxIn, onCompleteParams: [targetBox] });

  // added: highlight the proper buttons and remove the default "active" element
  $('.active').removeClass('active');
  $('.' + hashTag + '-control').addClass('active');
}

Чтобы выделить кнопки, вам нужно назначить им класс (это самый простой метод, поскольку вы не можете использовать повторяющиеся идентификаторы, поэтому мы идентифицируем вкладку по идентификатору, а кнопку - по классу): 

<button  class="tab01-control but active" id="but1" data-target="tab01">slide 1</button>
<button  class="tab02-control but" id="but2" data-target="tab02">slide 2</button>

Ваш boxIn(targetBox) метод ожидает получить объект jQuery в качестве параметра «targetBox», и это была строка. Просто добавьте "# tab02" к вашему URL, когда вы тестируете его локально, чтобы появилась вторая вкладка.

Примечание:

Ваш фрагмент кода в настоящее время не работает правильно, вы должны включить ... 

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>

... чтобы анимация работала должным образом, в противном случае вы получите сообщение об ошибке JS при нажатии одной из кнопок.

Редактировать 1

Поскольку вы спросили, как использовать значимые "имена хешей" вместо идентификаторов элемента управления, таких как tab01, это можно сделать с помощью простого переключателя: 

let hashTag = window.location.hash;
if (hashTag !== '') {
    hashTag = hashTag.substring(1);

    let targetName = '';

    switch (hashTag) {
        case "home":
            targetName = 'tab01';
            break;
        case "profile":
            targetName = 'tab02';
            break;
    }
    if (targetName !== '') {
        var targetBox = $('.tab#' + targetName);
        ...
    }
...