jquery - 我可以有两个处理程序的 url 吗？

Question

在网站的一个页面上有标签，每个标签都有自己的id，所以你可以通过make http://www.example.com/page#tab1直接调用每个标签。 .

问题是我想要制作的 url 将打开的不是选项卡的开头，而是位于内容中间的特定内容并且还有 id，因为是下拉菜单。

我可以制作 wlink 来打开特定的选项卡，但也会滚动到其他 id 或至少例如将 prescrool 200px 吗？

Answer 1

我不是很有经验，但我看到了你的问题，我很好奇这是否可以完成以及如何完成。

如果我没猜错，你有#tab1 #tab2 等元素，并希望能够指向其中的某个元素。如#tab1 > #element1、#tab1 > #element2 等。您还实现了一个与 URL 一起使用的选项卡系统。关于为什么需要这样做以及什么情况下真正有用的更多背景信息，老实说，但我会给你最好的机会。

我能想到的第一件事(我已经知道这是否是一个好的做法)是检查并保存一个 URL 的哈希值，并相应地使用和使用 scrollTop 方法。

不管怎样，我把这个https://codepen.io/cssjockey/pen/jGzuK使用 jQuery 制作的简单选项卡系统，我试图让它在 URL 上使用两个哈希值。

为此，我不得不从 codepen 下载代码并制作一个包含所有内容的 index.html 文件来尝试这个，因为我不知道如何使用 codepen 处理 URL 上的哈希值。

我所要做的就是稍微调整一下 JS 并向选项卡添加更多元素，这样转到某个 anchor 的页面就会引人注目。这是我更新后的 JS:

$('ul.tabs li').click(function(){ //this simply make the tab system work. It's from the codepen.
    var tab_id = $(this).attr('data-tab');

    $('ul.tabs li').removeClass('current');
    $('.tab-content').removeClass('current');

    $(this).addClass('current');
    $("#"+tab_id).addClass('current');
})

if(document.location.hash) { //now let's check if there's a hash
      var u = window.location.hash.substring(1);; //And if so let's puts hash in variable 
      hash = u.split('#'); //split it by # character and save it as an array 

      var element =  jQuery('#'+hash[0]); //now let's set that first hash as current tab
      $('.tab-content').removeClass('current'); //but first remove the curent classes first
      $('.tab-link').removeClass('current');           
      element.addClass('current');
      $("[data-tab="+hash[0]+"]").addClass('current'); //done selecting the tab using hash from URL

      if(hash[1]) { // now! if there's another hash in the URL
        var subElement = $('#'+hashes[1]);
        var goToElement = subElement.offset().top; 

        $(window).scrollTop(goToElement);//go there!
      }          

现在，如果我尝试访问/index.html#tab-4#element，它会将我带到第 4 个选项卡底部的 a。

这是一个 super 粗略的想法，不知道你在哪里或你做了什么，但仍然需要工作。如果你能提供一些代码帮助你会更容易。