<script> $(function() { var tab = $.getUrlVar('tab'); //alert(tab); $( "#tabs" ).tabs(); $( "#tabs" ).tabs( "option", "active", tab ); }); $.extend({ getUrlVars: function(){ var vars = [], hash; var hashes = window.location.href.slice(window.location.href.indexOf('?') +1).split('&'); for(var i = 0; i < hashes.length; i++) { hash = hashes[i].split('='); vars.push(hash[0]); vars[hash[0]] = hash[1]; } return vars; }, getUrlVar: function(name) { return $.getUrlVars()[name]; } }); </script> <body> <div id="menu"> <ul> <li><a href="./webpage.html?tab=0"></a></li> <li><a href="./webpage.html?tab=1"></a></li> <li><a href="./webpage.html?tab=2"></a></li> </ul> </div> <div id="tabs"> <ul> <li><a href="#tabs-1"></a></li> <li><a href="#tabs-2"></a></li> <li><a href="#tabs-3"></a></li> </ul> <div id="tabs-1"></div> <div id="tabs-2"></div> <div id="tabs-3"></div> </div> </body>
$.extend 로 시작하는 쿼리문을 추가한 뒤
get방식으로 넘긴 파라미터를 $.getUrfVer("파라미터명")으로 받아 올 수 있음
링크 클릭시 get방식으로 탭 인덱스를 넘기고
$("#tabs").tabs("option", "active", 탭 인덱스)
식의 쿼리 문을 넣어주면 페이지 이동시 해당 탭메뉴로 포커스가 이동함