我可以使用两个处理程序的URL吗？

Question

在网站的一个页面上有标签，每个标签都有自己的ID，因此您可以通过制作http://www.example.com/page#tab1直接调用每个标签。

问题是我想要打开的网址不是标签的开头，而是内容中间的特定内容，也有id，因为是下拉列表。

我可以制作wlink，它会打开特定的标签，但也会滚动到其他id或至少例如prescrool 200px？

Answer 1

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

如果我有这个权利你有＃tab1＃tab2等元素，并希望能够指向其中的某个元素。喜欢＃tab1＆gt; ＃element1，＃tab1＆gt; ＃element2等您还实现了一个使用URL的标签系统。 关于你为什么需要这样做的更多背景以及在什么情况下说实话真的很有用，但我会给你最好的机会。

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

无论如何，我使用了jQuery创建的这个https://codepen.io/cssjockey/pen/jGzuK简单标签系统，并尝试使用URL上的两个哈希值。

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

我所要做的就是稍微调整JS并向标签添加更多元素，以便进入某个锚点的页面会很明显。这是我在这里更新的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个标签的底部。

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

Answer 2

我不会在哈希中组合多个id，而是搜索具有由url的哈希定义的id的元素，然后使用例如遍历DOM来遍历DOM。 .closest('.tab-element')直到您到达DOM的根目录以检查是否需要切换一个或多个选项卡，切换到这些选项卡，然后将元素滚动到屏幕的可见部分。

以这种方式解决会使代码更容易维护，因为您不需要关心元素的嵌套方式。

这完全取决于你如何实现标签。