1. JQuery 코드 링크
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
: 위의 링크를 head영역 안에 써주면 JQuery의 기능을 가져와 쓸 수 있게 된다.
2. JQuery 소스 받아오기
이 페이지에서 왼쪽 탭에 원하는 기능을 선택하고
view source를 누르면 소스를 볼 수 있다.
3. JQuery 예제
-위의 페이지에서 소스를 받아와서 실행해보자!
-test5.jsp(탭 예제)
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
request.setCharacterEncoding("UTF-8");
String cp=request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script type="text/javascript">
$(function(){
$("#container").tabs();
})
</script>
</head>
<body>
<div id="container">
<ul>
<li><a href="#f1">첫번째</a></li>
<li><a href="#f2">두번째</a></li>
<li><a href="#f3">세번째</a></li>
</ul>
<div id="f1">
테스트1.............
</div>
<div id="f2">
테스트2.............
</div>
<div id="f3">
테스트3.............
</div>
</div>
</body>
</html>