2016-12-27 57 views
0

我在这里很新,但我经常访问堆栈溢出来引用我发现自己想问的东西(我倾向于发现99.9%的问题已经在这里'问'了嘿)如何知道前一个网页点击了哪个'href'链接?

但我想知道这是否。

我有一个主页有两个div元素(样式为带有转换效果的框,显示他们自己的样式a href链接)。

基本上这些是关于我们页面上的选项卡式内容的链接。

已将第一个按钮分配给ID为learn-more-1和另一个learn-more-2。以下观察:

<a id="#learn-more-1" href="about-us.html#company-history"/> 

<a id="learn-more-1" href="about-us.html#why-choose-us"/> 

about-us.html与分配了ID的两个div标签的容器:

#company-history#why-choose-us

及以下这些,我们有我们的内容(含相应的段落标题信息)。

我遇到的问题是,当我们点击主页上的href链接(样式为按钮btw ..)时,我们到达about-us页面没有任何问题。它的标签容器HOUSES标签按钮,但我们没有看到它们。显示的选项卡式内容从标题开始。

我在智慧结束试图了解我失踪。

我的问题是,有没有办法让我的about-us页面上使用jQuery,即:

$document.ready(function() { 

* psuedo code here * 
if the user arrived here via clicking learn-more-1 button 

make the tab button #company-history ACTIVE 
and scroll up 50px (so we can see the damn button as it only shows 
us the heading and paragraph content of the tab container..) 

else if the user arrived here having clicked learn-more-2 button, 
make the tab button #why-choose-us ACTIVE 
and scroll up 50px 
}; 

事情是这样的,默认情况下#our-company-history,在about-usactive。意思是如果您刚刚访问过about-us,您会看到标签容器显示了公司历史记录。所以没有什么隐藏的。

有没有办法或许,写一个函数,只是传递一个参数到about-us.html,这将使我们知道哪个href ref按钮链接被点击了,以便我们可以使用它?还是我在这里把一些非常简单的事情复杂化了?

希望这里有一些方向的人们欢呼!

编辑:

萨芬我必须知道,如果被点击的主页或者是HREF链接!这样,只有这样,我才能向他们展示选项卡式容器和活动选项卡下的内容。合理 ?每次用户点击about-us.html页面并默认显示选项卡式容器时,您提出的建议都会自动触发。不是我们为我的朋友所打的。所以你看,我需要一种方式来有条件地检查用户是否通过这两个href链接(从主页)到达about-us.html页面,然后相应地打开相应的选项卡式内容。顺便说一句,当href链接(样式为按钮)在主页中被点击时,它们会到达about-us页面和标签容器,但无法看到活动和非活动选项卡。这就是问题所在。

+1

只要勾选['window.location.hash'](https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/哈希值)。 –

+0

这不是什么按钮被点击的重要,但如提到什么哈希是在网址 – charlietfl

+0

谢谢马拉特,但没有多大帮助。 –

回答

0

一些代码来告诉你algoritm

$(document).ready(function() { 
    var tabId = window.location.hash; // get id of destination tab 
    if(tabId) { 
     $("#our-company-history").hide(); // hide default tab 
     var tab = $(tabId); // get destination tab 
     $(window).scrollTop(tab.offset().top); // scroll to destination tab 
     tab.show(); // display tab-content 
    } 
}); 
+0

哦,我的上帝br3t这真棒兄弟!兄弟,它的工作!^_ ^,但是你的代码的问题是,使用'$(window).scrollTop(tab.offset()。top); //滚动到目标标签'没有做任何改变。我只是添加一个数值来显示或多或少的所有标签容器,即$(window).scrollTop(tab.offset()。top - 250); //滚动到目标选项卡,因为我正在离线测试(locale on wampserver),我将使用此代码片段更新about-us页面,并在不同的视口观察效果。即时通信在手机上的'-250'可能会造成严重破坏,但我可以解决这个问题。 –

+0

嗨br3t,它再次嘿。是的,这里的代码是正确的,该死的它是如何在这个评论框中实现“返回”的!如果我打回来,它会发送任何类型的笑话,笑话。 OKAY - 那个代码?它仅适用于台式机。神奇的事情发生在这行:$(window).scrollTop(tab.offset()。top); ,但我想知道的是 - 为什么这不会发生在平板电脑和手机上?我在这方面做了一些研究,出于某种原因,scrollTop没有被电话浏览器或其他东西拾起。所以尽管我授予你B/A,我需要你帮助我在这里兄弟。 –

+0

使用伪代码和可想象的html很好玩,但没有人能帮助您解决真正的代码。 – br3t

相关问题