从另一个网页上的链接中选择JQUERY选项卡中的锚点 [英] Select an anchor within a JQUERY Tab from a link on anther webpage
问题描述
我是JQuery和Javascript的新手，希望你能解决我的问题。
i'm a complete novice at JQuery and Javascript, and was hoping you could help me out with my problem.
我正在使用JQuery 1.7.2和JQuery-ui 1.10.3选项卡。
I'm using JQuery 1.7.2 and JQuery-ui 1.10.3 Tabs.
从外部网址，我希望能够链接到位于JQuery选项卡中的锚点，但选项卡名称本身是也是一个锚。
From an external url, i want to be able to link to an anchor located within a JQuery tab, however the tab name itself is also an anchor.
我知道如何激活锚点所在的标签
I know how to activate the tab the anchor is located in
e.g. http://mysite.com/#tab-1
但我从哪里开始？
如何从网址指定我想要链接到tab-1的锚点？
How do I specify the anchor I want to link to located in tab-1 from a url?
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>
如有任何帮助，我们将不胜感激。
谢谢
Any help would be gratefully appreciated. Thanks
推荐答案
我设法通过在URL中提供选项卡名称和锚名称来实现自己的工作，然后使用javascript解析它。
I managed to get it working myself by supplying both the tab name and anchor name in the URL, and then parsing it with javascript.
然后，我将选项卡号传递给jquery以打开选项卡并对锚点进行简单的动画滚动。
Following that, I then passed the tab number to jquery to open the tab and did a simple animated scroll to the anchor.
例如网址为 http：// www mysite com＃tab-3& #myanchor
javascript is
e.g. URL is http://www mysite com#tab-3&#myanchor javascript is
$(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
This is using JQuery UI 1.10.3 and JQuery 1.7.2
要解决使用移动设备的问题，有时会将第二个＃转换为％23。
TO address an issue using a mobile device, sometimes it will turn the second # into %23.
要修复错误，您需要添加最后一行上方的这一行：
To fix the error, you would add this line above the last line:
if(anc !== ''){
anc = anc.replace('%23', '#');
}
这篇关于从另一个网页上的链接中选择JQUERY选项卡中的锚点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
