在网站的一个页面上有标签,每个标签都有自己的id,所以你可以通过make http://www.example.com/page#tab1直接调用每个标签。 .
问题是我想要制作的 url 将打开的不是选项卡的开头,而是位于内容中间的特定内容并且还有 id,因为是下拉菜单。
我可以制作 wlink 来打开特定的选项卡,但也会滚动到其他 id 或至少例如将 prescrool 200px 吗?
最佳答案
我不是很有经验,但我看到了你的问题,我很好奇这是否可以完成以及如何完成。
如果我没猜错,你有#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 粗略的想法,不知道你在哪里或你做了什么,但仍然需要工作。如果你能提供一些代码帮助你会更容易。
关于jquery - 我可以有两个处理程序的 url 吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44289370/