Javascript标签-如何在URL上添加井号？

Question

我的标签页工作正常，但是我需要一个单独的功能，该功能将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> 

Answer 1

如果我理解正确，您希望在加载时显示一个特定的选项卡，以防万一哈希已添加到页面的URL中，对吗？ 如果是这样，则应解析window.location.href并检查URL中的哈希标记。 如果存在，则哈希值（例如“＃tab2”）应显示具有相同ID的容器。

更新的代码：

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');
}

为了突出显示按钮，您需要给它们提供一个类（这是最简单的方法，因为您不能使用重复的ID，所以我们通过ID来标识选项卡，并通过类来标识按钮）：

<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

当您询问如何使用有意义的“哈希名称”而不是控件的ID（如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);
        ...
    }