jquery - Get방식 파라미터 전송 & 탭 메뉴 선택

<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", 탭 인덱스)

식의 쿼리 문을 넣어주면 페이지 이동시 해당 탭메뉴로 포커스가 이동함

Get방식 파라미터 전송 & 탭 메뉴 선택

단축키

Articles