Activate jQuery tab from link on other page
Hi,
I have 3 jQuery tabs in one page and would like to load that page, and at the same time "activate" a certain tab and its content from a link on a different page, ex.<a href"tabpage.asp?selectedTab=3">SELECT_TAB_3</a>
My code is:
###############################
<link type="text/css" href="css/jquery.ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="js/jquery.ui.core.js"></script>
<script type="text/javascript" src="js/jquery.ui.widget.js"></script>
<script type="text/javascript" src="js/jquery.ui.tabs.js"></script>
<script type="text/javascript">
$(function() {
function handleTabSelect(event, tab) {
if (tab.index == 0) {
// tab 1 selected
$('img#imgTab1').attr({ src: "img/tab1Selected_adv.png" });
$('img#imgTab2').attr({ src: "img/tab2Unselected_adv.png" });
$('img#imgTab3').attr({ src: "img/tab3Unselected_adv.png" }); }
else if (tab.index == 1) {
// tab 2 selected
$('img#imgTab2').attr({ src: "img/tab2Selected_adv.png" });
$('img#imgTab1').attr({ src: "img/tab1Unselected_adv.png" });
$('img#imgTab3').attr({ src: "img/tab3Unselected_adv.png" });
}
else if (tab.index == 2) {
// tab 2 selected
$('img#imgTab3').attr({ src: "img/tab3Selected_adv.png" });
$('img#imgTab1').attr({ src: "img/tab1Unselected_adv.png" });
$('img#imgTab2').attr({ src: "img/tab2Unselected_adv.png" });
}
}
// Set Tab Constructor values & initialize tabs
$('#tabs').tabs({ selected: '0',
fx: { opacity: 'toggle', duration: 'slow' }, select: handleTabSelect }); });
</script>
<div id="tabs">
<ul style="background:url(img/tab_menu_border_horisontal.png); background-repeat:repeat-x; z-index: 10">
<li runat="server" style="width:193px; height:41px"><a href="#Tab1Content"><span><img id="imgTab1" width="193" height="41" src="img/tab1Selected_adv.png" border="0" /></span></a></li>
<li runat="server" style="width:187px; height:41px"><a href="#Tab2Content"><span><img id="imgTab2" width="187" height="41" src="img/tab2Unselected_adv.png" border="0" /></span></a></li>
<li runat="server" style="width:187px; height:41px"><a href="#Tab3Content"><span><img id="imgTab3" width="187" height="41" src="img/tab3Unselected_adv.png" border="0" /></span></a></li>
</ul>
<div id="TabsMain">
<div id="Tab1Content">
MYCONTENT1
</div>
<div id="Tab2Content">
MYCONTENT2
</div>
<div id="Tab3Content">
MYCONTENT3
</div>
##################################
I hope someone can help me quickly solve this issue :-)
Thank you very much in advance
/Stig :-)