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

by 조쉬 posted Sep 21, 2016
?

단축키

Prev이전 문서

Next다음 문서

ESC닫기

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

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

위로 아래로 댓글로 가기 인쇄

Sketchbook5, 스케치북5

Sketchbook5, 스케치북5