i'm a complete novice at JQuery and Javascript, and was hoping you could help me out with my problem.
I'm using JQuery 1.7.2 and JQuery-ui 1.10.3 Tabs.
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
but where do i go from there?
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
Here's the 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