Deep link to tab content

[patrick0001]

How can I make script direct link to a tab content? E.g. a page direct link into tab 2 at http://jqueryui.com/demos/tabs/ instead of tab 1.

[Immerse]

Depends on how the tabs are set up, but for that example: http://jqueryui.com/demos/tabs/#tabs-2

[patrick0001]

Hi Immerse, thanks to reply.

How about those tab content which is not support anchor link? My site gen-education.com/preview/page/gen-buddies-uk.html have problem to link to tab content, each time when I click the back button, it will fall into landing tab, instead of custom tab content.

[paul_wilkins]

How about those tab content which is not support anchor link? My site gen-education.com/preview/page/gen-buddies-uk.html have problem to link to tab content, each time when I click the back button, it will fall into landing tab, instead of custom tab content.

If the target web site is one that you have no control over, there is no much that can be done, other than to leave instructions telling the user how to get to the appropriate tab.

[patrick0001]

I am the site owner, how can I add the call back function? I did try javasript back to history function, but its seem like have limit function on frameset.

[paul_wilkins]

I am the site owner, how can I add the call back function? I did try javasript back to history function, but its seem like have limit function on frameset.

That depends on what's being dealt with.

Can you provide us with a link to a tabbed content page that exhibits the problem?

[patrick0001]

When I click on below back button, I cant back to C tab content, it keep back to A tab.

gen-education.com/preview/cms/index.php?option=com_content&view=article&id=14

My back button insert the following code: #tab_3

[paul_wilkins]

My back button insert the following code: #tab_3

Don't get me wrong on this, but haven't web browsers had a back button located in a prominent and easy to find location since forever?

[paul_wilkins]

My back button insert the following code: #tab_3

What is the origin of your tab code. Is its origin from some other location? There might be a good solution that I can find for you there.

[patrick0001]

Sorry I wasn't clear enough, I am not referring to the top back button at the browser. But I am referring the green back button on the page itself, I need it can be link back to Tab C

gen-education.com/preview/cms/index.php?option=com_content&view=article&id=14

[paul_wilkins]

Sorry I wasn't clear enough, I am not referring to the top back button at the browser. But I am referring the green back button on the page itself, I need it can be link back to Tab C

What is the origin of your tab code. Did you get it from some other location, or have you written it yourself?
If from some other location, there might be a good solution that I can find for you there.

[patrick0001]

Hi Paul, I cant provide it because I grab it from friend template. Origin template: mcare.org.my/test/webbiemy/tab.html

[paul_wilkins]

Would you consider using the official jQuery tabs, which are designed to work in the way that you want to use them here.
For example, using the link http://jqueryui.com/demos/tabs/#tabs-2 it automatically shows that tab when the page loads.

[patrick0001]

Thank you Paul, I will consider that, as it is well support. Fixing a code can be a painful job. Thanks again.

[paul_wilkins]

Thank you Paul, I will consider that, as it is well support. Fixing a code can be a painful job. Thanks again.

If you were going to support the pre-existing tabs, it would mean running some code after the page has finished loading that checks the fragment identifier of the page, and if there is something there it would then call the tab-based code to change the displayed tab to the one that is referenced in the url.

[patrick0001]

I found a solution at zachstronaut.com/posts/2009/06/08/jquery-ui-tabs-fix.html

I added the following code to gen-education.com/preview/page/gen-buddies-uk.html#tab_3

<script type="text/javascript">
			$(function(){
	
				// Tabs
				$('#tabs-gallery').tabs-gallery();
                $('#tabs-gallery ul li a:active').click(function () {location.hash = $(this).attr('href');});
				
				//hover states on the static widgets
				$('#dialog_link, ul#icons li').hover(
					function() { $(this).addClass('ui-state-hover'); }, 
					function() { $(this).removeClass('ui-state-hover'); }
				);
				
			});
		</script>