티스토리 뷰

프로그래밍/Front (HTML, CSS, JS)

[jQuery] Get 방식의 주소 파라미터를 받아서 처리(unescape)

꼬렙 2011. 12. 29. 12:15
728x90
[a.html] => 이동 전 페이지

<HTML>
<HEAD>
<TITLE>Get 방식의 주소 파라미터를 받아서 처리</TITLE>
<script type="text/javascript">
var move = function(number) {
location.href = "b.html?tab=" + number;
};

</script>
</HEAD>

<BODY>
<input type="button" value="1번 탭으로 이동" onClick="move(1)" />
<br />
<input type="button" value="2번 탭으로 이동" onClick="move(2)" />
</BODY>
</HTML>



[b.html] => a.html에서 이동할 페이지

<HTML>
<HEAD>
<TITLE>Get 방식의 주소 파라미터를 받아서 처리</TITLE>

<script type="text/javascript" src="jquery-1.6.4.js"></script>

<script type="text/javascript">
var displayTab = function(number) {
$('div > div').css('display', 'none');
$('#tab_' + number).css('display', 'block');
};

$(document).ready(function() {
var address = unescape(location.href);
var param = "";
if(address.indexOf("tab", 0) != -1) {
param = address.substring(address.indexOf("tab", 0) + 4);
} else {
param = "1";
}
displayTab(param);
});

</script>

<style type="text/css">
div#tab_1 {display:none; position:absolute; top:50px; left:50px; width:100px; height:100px; background:red;}
div#tab_2 {display:none; position:absolute; top:150px; left:50px; width:200px; height:200px; background:blue;}
</style>

</HEAD>

<BODY>
<div id="tab_menu">
<input type="button" value="1번 탭 보이기" onClick="displayTab(1)" />
<input type="button" value="2번 탭 보이기" onClick="displayTab(2)" />
</div>
<div id="tab">
<div id="tab_1">
</div>

<div id="tab_2">
</div>
</div>
</BODY>
</HTML>


[실행화면]

a.html


1번 버튼으로 이동


2번 버튼으로 이동



잡다한 내용은 다 빼고.. 여기서 중요한 것은 unescape(location.href) 이 부분이다
저 구문을 출력해 보면 아래와 같이 나온다


현재 주소창에 띄워져 있는 문자들을 그대로 가져온다

그런데 여기서 필요한것은 tab = 2 라는 부분이므로 

var address = unescape(location.href);
var param = "";
if(address.indexOf("tab", 0) != -1) {
        param = address.substring(address.indexOf("tab", 0) + 4);
} else {
        param = "1";
}


이런식으로 "2" 를 가져올수 있다

그냥 써줘도 되는데 굳이 조건식을 사용한 것은..
a.html을 거쳐서 b.html로 갈수도 있지만 바로 b.html을 실행했을때는 1번 페이지를 보여주려고 했기 때문이다

'프로그래밍 > Front (HTML, CSS, JS)' 카테고리의 다른 글

[jQuery] 셀렉터 및 함수 정리  (6) 2012.01.12
[JavaScript] arguments(전달된 인자)  (3) 2012.01.10
웹접근성 페이지 제작 준수사항(체크리스트)  (0) 2011.11.22
[JavaScript] IE, 크롬 마우스 좌표 가져오기  (0) 2011.10.24
[JQuery] 마우스 오른쪽 버튼 / 키보드 단축키 금지  (0) 2011.10.11