우리가 흔히 쓰는 show(), hide() 를 스크립트, 제이쿼리, 제이쿼리의 toggle을 이용해서 작성한 코드임.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri = "http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql"%>
<%@ taglib prefix="x" uri="http://java.sun.com/jsp/jstl/xml"%>
<!--
show(), hide() 테스트
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>sample</title>
<script>
$(document).ready(function(){
});
$(function(){
$("#B01").click(function(){
if( $("#U01").css("display")=="none" ){
$("#U01").show();
}else{
$("#U01").hide();
}
});
$("#B03").click(function(){
$("#U03").toggle();
});
});
function doshow(){
obj = document.getElementById("U02");
obj.style.display = (obj.style.display == "none") ? "block" : "none";
}
</script>
</head>
<body>
<div>
<input type="button" id="B01" value="클릭버튼">
<ul id="U01">
<li>여기는 제이쿼리 방식으로</li>
<li>숨깁니다.</li>
<li>12345</li>
</ul>
</div>
<p>-----------------------------------------------------------</p>
<div>
<input type="button" id="B02" value="클릭버튼" onclick="doshow()">
<ul id="U02">
<li>여기는 스크립트 방식으로</li>
<li>숨깁니다.</li>
<li>12345</li>
</ul>
</div>
<p>-----------------------------------------------------------</p>
<div>
<input type="button" id="B03" value="클릭버튼">
<ul id="U03">
<li>여기는 제이쿼리 토글입니다.</li>
<li>숨깁니다.</li>
<li>12345</li>
</ul>
</div>
<p>-----------------------------------------------------------</p>
</body>
</html>
'나는개발자다!! > javascript&제이쿼리' 카테고리의 다른 글
| 자바스크립트 변수를 활용한 카운팅 썰 (0) | 2018.10.16 |
|---|---|
| 자바스크립트썰 구구단 만들기 (0) | 2018.10.16 |
| 페이지 로딩 시 기본 선택값 제어 (0) | 2015.05.26 |
| 라디오 버튼 선택된 값 얻기 (0) | 2015.05.08 |
| 제이쿼리 유용한 셀렉터 썰~ (0) | 2015.03.10 |