메뉴 건너뛰기

조회 수 8566 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
<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", 탭 인덱스)

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


List of Articles
번호 제목 날짜 조회 수
119 jquery 팝업 차단 없이 띄우기 2019.03.05 2868
118 [jQuery] 라디오(radio) 버튼, 체크박스(checkbox) 선택/해제 하는 방법 2019.03.05 1129
117 jQuery 기초 (Query link url / download (위치, 사용법) // p태그, id, class 접근 / 일반태그 가져오기 / 클릭시 값) 2019.01.16 1079
116 jQuery 기초 (클릭하면 이미지 변경 / mouseover시 애니메이션 효과주기 / 동적으로 변경) 2019.01.16 1507
115 jQuery 기초 (focus, blur, toggle / mouseenter, mouseleave, mousedown, mouseup, hover) 2019.01.16 1268
114 jQuery 기초 (style.css <link> 로 추가하기 / 버튼 클릭시 데이터 삽입) file 2019.01.16 1181
113 jQuery 기초 (JQuery - text(), val(), html(), attr(), prop()) 2019.01.16 1055
112 jQuery 기초 (attr()로 두가지 동시에 접근 / 변경) 2019.01.16 1119
111 jQuery 기초 (텍스트 추가 (createElement, createTextNode, appendChild), (html, javascript, jquery) file 2019.01.16 1411
110 jQuery 기초 ((문자열 추가 .before / .after) (문자열 삭제 .remove / .empty) file 2019.01.16 1084
109 jQuery 기초 (txt 파일 가져오기 (load) , 클릭시에 배경색을 변경(json)) file 2019.01.16 3225
108 Query 기초 (동적 테이블 (데이터 추가 / 삭제), integrateTable(정렬(sort)) file 2019.01.16 2194
107 jQuery 기초 (jQuery 달력 (datepicker)) file 2019.01.16 1321
106 jQuery 기초 (Postcodify - 도로명주소 우편번호 검색 프로그램 (코딩 예제) (HTML) / POP UP 버젼) file 2019.01.16 1349
105 .removeAttr() : 특정 속성을 제거 2019.01.16 1021
104 .attr() : 태그의 속성 값을 읽어오거나 속성을 추가및 재설정 2019.01.16 962
103 popModal jQuery Plugin Examples / 무료 jQuery 팝업 플러그인 file 2019.01.16 1235
102 jQuery Plugin : Slider file 2019.01.10 1113
101 jQuery datepicker 팝업창 사이즈 바꾸기 file 2019.01.10 1501
100 jQuery를 이용한 스크롤 따라니는 배너를 쉽게 맨들기(scroll follow) file 2019.01.10 1093
Board Pagination Prev 1 2 3 4 5 6 7 8 9 Next
/ 9

하단 정보를 입력할 수 있습니다

© k2s0o1d4e0s2i1g5n. All Rights Reserved