<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", 탭 인덱스)
식의 쿼리 문을 넣어주면 페이지 이동시 해당 탭메뉴로 포커스가 이동함
이미지 클릭시 확대하기