努力链接到外部链接的选项卡式内容

非常沮丧和尴尬，我无法弄清楚这一点。 客户需要网站底部的站点地图，只需单击一下，即可将用户带到该页面中的任何页面和任何选项卡。 应该很容易做到，但由于某种原因，我无法将我的大脑包裹起来。 为了完全诚实，我是一名艺术家，只有足够的代码知识才有危险。 我不能自己编写JQuery，但我能够阅读已经编写的内容并了解正在发生的事情。

1. 示例1- Contact.php具有基本function

2. 示例2- TabTest1.html我能够从stackoverflow的.com问题10616833 / link-to-anchor-inside-tabbed-content-from-an-external-link中获取信息并使其工作。 那里的剧本实际上不起作用（对我来说）。 我花了一天时间，但我弄清楚它是什么（括号，像往常一样），你看到的是工作中的信息。 不幸的是，它不只是插入我已有的代码。 我尝试了几种不同的方法，但我并不完全理解jsfiddle中发生了什么。

3. 示例2- ContactRE.php这是我尝试使用上述问题中给出的代码的最佳尝试。 我只是觉得不堪重负。 您可以单击选项卡并查看它正在执行的操作，但在单击任何选项卡后，它们都会亮起为已选中，但内容根本不会更改。 我怀疑它与“// return false”有关。 在“if”语句之前，因为取消注释它会使它全部工作，但仍然无法从外部链接到单个选项卡。 当它打开时，似乎ContactRE.php #Social确实链接，但只有在输入后，按Enter键，等待然后点击刷新。

4. 示例4- index.php您可以看到它与示例1类似，只是一个不同的页面来测试链接。 它不起作用。 标签内容刚刚消失。

对于示例1,2和4，您可以看到我甚至在点击站点地图所在的“BottomInfo”类中的论坛之前尝试自己解决这个问题。 当我意识到我认为可行的系统时，Links3就是我开始使用的那个，在Links2和Links1中不会削减它。 我只是采用构成选项卡的链接，通过CSS删除样式并制作列表。 适用于它的相应页面，但不能在外部链接。

我为那些喜欢它的人创建了一个JSFiddle。 我不太擅长理解“嘿，只要加上这个，突然 – 魔术！” 然后是代码片段，除非他们有很好的解释。 也许有一天，还没有。 http://jsfiddle.net/ANCannan/CfGHp/

下面是我工作的JS，但我不能在URL中使用哈希来外部链接到选项卡

 $(document).ready(function(){ // When user clicks on tab, this code will be executed $("#tabs li").click(function() { // First remove class "active" from currently active tab $("#tabs li").removeClass('active'); // Now add class "active" to the selected/clicked tab $(this).addClass("active"); // Hide all tab content $(".tab_content").hide(); // Here we get the href value of the selected tab var selected_tab = $(this).find("a").attr("href"); // Show the selected tab content $(selected_tab).fadeIn(); // At the end, we add return false so that the click on the link is not executed return false; });});  

这是我的Frankenstein JS尝试通过URL中的哈希使标签链接

   $(document).ready(function(){ // When user clicks on tab, this code will be executed $("#tabs li").click(function() { // First remove class "active" from currently active tab $("#tabs li").removeClass('active'); // Now add class "active" to the selected/clicked tab $(this).addClass("active"); // Hide all tab content $(".tab_content").hide(); // Here we get the href value of the selected tab var selected_tab = $(this).find("a").attr("href"); // Show the selected tab content $(selected_tab).fadeIn(); // At the end, we add return false so that the click on the link is not executed return false; }); if (window.location.hash !== '') { var $targetAnchor = $(document.location.hash); // Grab the ID of the .tab-content that the hash is referring to tabId = $targetAnchor.closest('.tab_content').attr('id'); // Find the anchor element to "click", and click it $("#tabs li").find('a[href=#' + tabId + ']').click(); $('html, body').animate({ scrollTop: $targetAnchor.offset().top }); } $('a').not('.tabs li a').on('click', function(evt) { evt.preventDefault(); var whereTo = $(this).attr('goto'); $tabs = $("ul.tabs li"); $tabs.find('a[href=#' + whereTo + ']').trigger('click'); alert(attr('name')); alert( $('#'+whereTo+' a').offset().top ); $('html, body').animate({ scrollTop: $('#'+whereTo+' a').offset().top }); }); $(function() { $('a.refresh').live("click", function() { location.reload(); }); });});  

这是我的缩写HTML

 
 
 
 
 
 
 
 
 
 Before
 
 
 
 During
 
 
 
 After
 
 
 
 
 
 
 
 
 
 
Sed do eiusmod tempor incididunt consectetur adipisicing elit, duis aute irure dolor. In reprehenderit in voluptate quis nostrud exercitation eu fugiat nulla pariatur. Ullamco laboris nisi qui officia deserunt lorem ipsum dolor sit amet. In reprehenderit in voluptate cupidatat non proident, sed do eiusmod tempor incididunt.
 
Ullamco laboris nisi ut aliquip ex ea commodo consequat. Consectetur adipisicing elit, in reprehenderit in voluptate ut enim ad minim veniam. Lorem ipsum dolor sit amet, quis nostrud exercitation velit esse cillum dolore. In reprehenderit in voluptate excepteur sint occaecat eu fugiat nulla pariatur.
Sed do eiusmod tempor incididunt consectetur adipisicing elit, duis aute irure dolor. In reprehenderit in voluptate quis nostrud exercitation eu fugiat nulla pariatur. Ullamco laboris nisi qui officia deserunt lorem ipsum dolor sit amet. In reprehenderit in voluptate cupidatat non proident, sed do eiusmod tempor incididunt.
 
Ullamco laboris nisi ut aliquip ex ea commodo consequat. Consectetur adipisicing elit, in reprehenderit in voluptate ut enim ad minim veniam. Lorem ipsum dolor sit amet, quis nostrud exercitation velit esse cillum dolore. In reprehenderit in voluptate excepteur sint occaecat eu fugiat nulla pariatur.
 
 
 
In reprehenderit in voluptate cupidatat non proident, sed do eiusmod tempor incididunt.
 
Ullamco laboris nisi ut aliquip ex ea commodo consequat. Consectetur adipisicing elit, in reprehenderit in voluptate ut enim ad minim veniam. Lorem ipsum dolor sit amet, quis nostrud exercitation velit esse cillum dolore. In reprehenderit in voluptate excepteur sint occaecat eu fugiat nulla pariatur.
 
Sed do eiusmod tempor incididunt consectetur adipisicing elit, duis aute irure dolor. In reprehenderit in voluptate quis nostrud exercitation eu fugiat nulla pariatur. Ullamco laboris nisi qui officia deserunt lorem ipsum dolor sit amet. In reprehenderit in voluptate cupidatat non proident, sed do eiusmod tempor incididunt.
 
Ullamco laboris nisi ut aliquip ex ea commodo consequat. Consectetur adipisicing elit, in reprehenderit in voluptate ut enim ad minim veniam. Lorem ipsum dolor sit amet, quis nostrud exercitation velit esse cillum dolore. In reprehenderit in voluptate excepteur sint occaecat eu fugiat nulla pariatur. 
 
  
 
Sed do eiusmod tempor incididunt consectetur adipisicing elit, duis aute irure dolor. In reprehenderit in voluptate quis nostrud exercitation eu fugiat nulla pariatur. Ullamco laboris nisi qui officia deserunt lorem ipsum dolor sit amet. In reprehenderit in voluptate cupidatat non proident, sed do eiusmod tempor incididunt.
 
Ullamco laboris nisi ut aliquip ex ea commodo consequat. Consectetur adipisicing elit, in reprehenderit in voluptate ut enim ad minim veniam. Lorem ipsum dolor sit amet, quis nostrud exercitation velit esse cillum dolore. In reprehenderit in voluptate excepteur sint occaecat eu fugiat nulla pariatur.
 
Sed do eiusmod tempor incididunt consectetur adipisicing elit, duis aute irure dolor. In reprehenderit in voluptate quis nostrud exercitation eu fugiat nulla pariatur. Ullamco laboris nisi qui officia deserunt lorem ipsum dolor sit amet. In reprehenderit in voluptate cupidatat non proident, sed do eiusmod tempor incididunt.
 
Ullamco laboris nisi ut aliquip ex ea commodo consequat. Consectetur adipisicing elit, in reprehenderit in voluptate ut enim ad minim veniam. Lorem ipsum dolor sit amet, quis nostrud exercitation velit esse cillum dolore. In reprehenderit in voluptate excepteur sint occaecat eu fugiat nulla pariatur.
 
 

我已经阅读了以下内容并尝试以各种方式实现，但没有一个工作。 我甚至试图应用一些手风琴的思维结构，因为人们似乎对手风琴提出同样的问题，但我不擅长将它应用于标签。

有关stackoverflow的相关问题

• 链接到一个锚-内- jQuery的标签内容
• 无法对呼叫特定内容从-AN-外部文件中，jQuery的
• 用一法jQuery的代码对所有人的选项卡
• 如何对链接直接到jQuery的手风琴标签
• 链接到开放jQuery的手风琴
• jQuery的标签链接到另一个标签-从-内部

JQuery的主题/ link-to-tab-from-outside-tabs-div

---

很抱歉没有链接，显然我只能发帖2。

主要更新 10月19日东部时间下午1点我还没有完全解决我的问题，但我现在可以从网站外部链接到特定的URL（或输入），但是，如果我在页面上，当我更新URL时单击页面中的链接或手动键入，但在单击“刷新”之前不会更改内容。 页面是http://certus.worldpath.net/crazy.html通过在末尾添加“#Email”直接链接到选项卡。 思考？

我将非常感谢您能给我的任何帮助。

Answer 1

一个使用jquery.tools作为选项卡的演示

据我所知，你的问题应该与你的问题相符：

• 表B-1
• 表B-3

使用您的代码解决原始问题的解决方案

• 如何链接到外部链接的选项卡式内容？
• 解决了

请看一下解决方案 （ #During ， ＃Aftert ）

  if (window.location.hash) { var wndHash = window.location.hash; var tab = wndHash + "Tab"; // if hash exist on doc ready then remove class "active" from all tabs $("#tabs li").removeClass('active'); // show the tab content and make tab list item (li) active $(wndHash).fadeIn(); $(tab).parent().addClass("active"); console.log(wndHash, $(wndHash), tab, $(tab)); } else { // if no hash make the BeforeTab active $("#Before").fadeIn(); $("#BeforeTab").parent().addClass("active"); } 

使用CSS3选择器进行游览

基于Naman Goel建议（参见本主题）我已经设置了一个基本的css3目标选择器演示 ：

  
Table of contents
 
 
intro 
the end 
 
CSS3 selectors and the :target pseudo class
 
Look at me - i am the END-Anchor 

这个css

 h2 {font-size: 24px; font-weight: heavy; padding: 1em;} *:target { color: red; font-size: 32px; } 

如果url包含相应的锚（#intro或#end），则基本设置是否更改h2标题的css

如何使用内部（锚点）链接更改选项卡的内容？

在您的主要更新中，您写道：“如果我在页面上，当我点击页面中的链接但不会更改内容时，URL会更新”

在您的页面中，所有选项卡（选项卡电子邮件）都正常工作并正在加载相应的内容。 所以我假设您正在讨论页面页脚crazy.html中的链接：

 
 
 Contact 
 
foo
 
 Email Us
 
 
 
  

如果单击此链接，则不会更新内容，因为您没有为页脚中的链接附加事件处理程序。

页脚链接没有事件处理程序

使用chrome devtools，您可以看到页脚中的链接没有附加事件处理程序。

。

在您的javascript中，为每个匹配此选择器的 DOM节点添加一个click事件$("#tabs li") 。 在您的页脚（ BottomInfo ）中，列表项与选项卡中的选择器不匹配。 因此，当您单击页脚中的链接时，没有任何反应。 如果为列表项$("#Nottabs li").click(...添加事件处理程序$("#Nottabs li").click(...并将相同的代码添加到选项卡中，它应该起作用。

 $("#Nottabs li").click(function () { // similar to your tab solution // you have to attach a click-event handler // to the list item in your BottomInfo } 

使用javascript和css 2完全工作的演示

请以您的代码为起点，查看完整工作的演示 。

如果这可以解决您的问题，请告诉我

次要更新

我找到了一个使用css3的标签演示 。 这令人印象深刻。

Answer 2

我有一个更简单的解决方案。 使用标签界面的：target的CSS3属性。 一切都会以这种方式开始为你工作。

此外，您可以使用选择性为旧浏览器填充它。

基本上你用标签内容定义不同的div。 并将其设置为display：none和div：target {display：block; }

选项卡按钮可以是#idnameofDiv的简单链接

这真的很容易。 它应该是你的完美，加上没有javascript。