1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 | <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", 탭 인덱스)
식의 쿼리 문을 넣어주면 페이지 이동시 해당 탭메뉴로 포커스가 이동함
이미지 클릭시 확대하기
