从另一个网页上的链接中选择 JQUERY 选项卡中的锚点答案

【问题标题】：Select an anchor within a JQUERY Tab from a link on anther webpage从另一个网页上的链接中选择 JQUERY 选项卡中的锚点
【发布时间】：2013-07-10 23:27:33
【问题描述】：

我是 JQuery 和 Javascript 的新手，希望您能帮助我解决我的问题。

我正在使用 JQuery 1.7.2 和 JQuery-ui 1.10.3 选项卡。

从外部 url，我希望能够链接到位于 JQuery 选项卡内的锚点，但是选项卡名称本身也是一个锚点。

我知道如何激活锚点所在的标签

e.g. http://mysite.com/#tab-1

但是我该去哪里呢？

如何从 url 指定要链接到 tab-1 的锚点？

e.g. http://mysite.com/#tab-1#myanchor

这是 HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="/css/jquery-ui-1.10.3.custom.css" rel="stylesheet" type="text/css" media="all"/>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function() 
  {var tabs = $( "#tabs" ).tabs(); 
   tabs.find( ".ui-tabs-nav" ).sortable(
     {axis: "x",
      stop: function() 
        {tabs.tabs( "refresh" );
        }
     }
    );
  }
);
</script> 
</head>

<body>
  <div id="tabs">
    <ul>
      <li><a href="#tab-1">1st Tab</a></li>
      <li><a href="#tab-2">2nd Tab</a></li>
      <li><a href="#tab-3">3rd Tab</a></li>
    </ul>
    <div id="tab-1">
      <h2>1st Tab</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
         Maecenas at dui tempor, adipiscing nisl id, tempus nisi. 
         Donec posuere pulvinar lacus, non suscipit eros ultrices. 
      </p>   
    </div> <!-- end of tab-1 div -->

    <div id="tab-2">
      <h2>2nd Tab</h2>
      <p>Suspendisse lacus mi, ornare quis nulla eget, commodo 
         auctor arcu. Proin ut erat vestibulum, vestibulum odio 
         sit amet, dapibus nisi. Morbi nec semper mi. 
      </p>
    </div> <!-- End of tab-2 div -->

    <div id="tab-3">
      <h2>3rd Tab</h2>
      <p>Proin ullamcorper ornare ultricies. Morbi bibendum 
         mauris eu purus rhoncus, id lacinia sapien placerat. 
         Nunc euismod lectus eu elit accumsan dignissim.
      </p>   
      <p><b><span id="myanchor">Anchor is here</span></b>
      </p> 
    </div> <!-- End of tab-3 div -->        
  </div> <!-- End of tabs div -->  
</body>

任何帮助将不胜感激。谢谢

【问题讨论】：

标签名本身就是锚？你的意思是# 在名字里吗？您有一些我们可以查看的 HTML 代码吗？
@Dan Gribble -- 你试过了吗mysite.com#myanchor
@Muthukumar，是的，我确实尝试过，但它不起作用。要首先打开选项卡，您必须在 URL 上指定锚名称。 JQuery UI 选项卡的设计使您可以通过在 URL 上指定 # 后跟选项卡名称来完成此操作。只是anchor也是在url中加上了hash前缀，那我该怎么做呢？
@putvande，我假设 JQuery UI 在选项卡名称之前使用哈希来确定单击或通过 URL 打开哪个选项卡，但之后我不知道如何指定特定的锚定在 URL 上。我会放一个代码示例供您查看。

标签： jquery jquery-ui tabs anchor hyperlink

【解决方案1】：

我找到了这个，对你有帮助吗？

http://raw10.cust.magicedit.com/sandbox/jqueryTabs/

【讨论】：

感谢 Pieter，这正是我正在寻找的东西，但是我希望能够从外部 URL 执行此操作。查看源代码，似乎这是从同一页面链接的。我需要从不同的网页执行此操作。
确实如此，但是当在 url 中找到 #tag 时，也许您可以触发 onClick-event？ (stackoverflow.com/questions/3552944/…)
嘿 Pieter，是否可以在 jquery ui 1.10 中执行此操作？

【解决方案2】：

我通过在 URL 中同时提供选项卡名称和锚点名称，然后用 javascript 解析它，设法让它自己工作。

之后，我将标签编号传递给 jquery 以打开标签并进行简单的动画滚动到锚点。

例如网址是http://wwwmysite com#tab-3myanchor javascript是

$(document).ready(function(){
  var hash_parts = location.hash.split('&', 2); //2 - limit, may be changed if more than two arguments.
  var tab        = hash_parts[0];               // Tab number part of url.  Array starts at 0 for 1st element.
  var anc        = hash_parts[1];               // Anchor name.
  var tabId      = tab.split("-").pop()-1;      // Tab no. relating to Jquery ui index no. (starts at zero for tab 1.)  

  $("#tabs").tabs("option", "active", tabId);  // Select the tab.
  $('html, body').animate({'scrollTop': $(anc).offset().top}, 1000); // Animated scroll to anchor.
});

这是使用 JQuery UI 1.10.3 和 JQuery 1.7.2

为了解决使用移动设备的问题，有时它会将第二个 # 变成 %23。

要修复错误，您可以在最后一行的上方添加这一行：

  if(anc !== ''){
    anc = anc.replace('%23', '#');
  }

【讨论】：

我做了一个不太一样的代码笔......但本着同样的精神。 codepen.io/digitalbart/pen/QXYxaM