ppillip/nice.html

## nice.html
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="pragma" content="no-store">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="Expires" content="1">

    <title>REC 계약 관리 시스템</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="jquery-ui.min.css">
    <script type="text/javascript" src='jquery-3.4.1.js'></script>
    <script type="text/javascript" src='jquery-ui.min.js'></script>

    <script type="text/javascript">
      $( document ).ready( function(){

          $("button[name=button1]").on('click',function(){
            loadPage("menu1?page=white");
          });

          $("button[name=button2]").on('click',function(){
            loadPage("menu2?search=black");
          });

          $("button[name=button3]").on('click',function(){
            loadPage("menu3?search=red");
          });

          //컨텐츠 로딩하는 공통함수
          loadPage = function(url,flag) {

            //url = !url?"menu1?page=white":url;
            console.log("loadPage",url);


            if(flag!="hash"){
              history.pushState({a:1,b:2},"타이틀"+url,"#"+url);
            }

            //컨텐츠들어갈 부분
            jQuery('#content').html("여기는 컨텐츠영역임 " + url);

          }

      } );

      //뒤로 또는 앞으로 가기 이벤트 발생시
      $(window).on('hashchange', function () {

        console.log("시작 >>>>> hashchange");
        goToFromHash();
        console.log("hashchange <<<<< 끝");

      });

      //처음 로딩됬을때
      $(window).on('load', function () {
          goToFromHash('onload');
      });

      //해시 파싱했을때 처리 할것
      function goToFromHash (flag)
      {
          var hashtag = location.hash.substring(1, location.hash.length).replace(/ /gi, '%20');
          console.log("해시값","[",hashtag,"]");

          if (!hashtag && flag != 'onload') {
              location.reload();
          } else {
              loadPage(hashtag,"hash");
          }
      }
    </script>

</head>
<body>

  <button type="button" name="button1">첫번째페이지</button>
  <button type="button" name="button2">두번째페이지</button>
  <button type="button" name="button3">세번째페이지</button>

  <div id="content">
     메인페이지입니다
  </div>

</body>
</html>
	<!DOCTYPE html>
	<html lang="ko">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=Edge">
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="pragma" content="no-store">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="Expires" content="1">

	<title>REC 계약 관리 시스템</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

	<link rel="stylesheet" href="css/main.css">
	<link rel="stylesheet" href="jquery-ui.min.css">
	<script type="text/javascript" src='jquery-3.4.1.js'></script>
	<script type="text/javascript" src='jquery-ui.min.js'></script>

	<script type="text/javascript">
	$( document ).ready( function(){

	$("button[name=button1]").on('click',function(){
	loadPage("menu1?page=white");
	});

	$("button[name=button2]").on('click',function(){
	loadPage("menu2?search=black");
	});

	$("button[name=button3]").on('click',function(){
	loadPage("menu3?search=red");
	});

	//컨텐츠 로딩하는 공통함수
	loadPage = function(url,flag) {

	//url = !url?"menu1?page=white":url;
	console.log("loadPage",url);


	if(flag!="hash"){
	history.pushState({a:1,b:2},"타이틀"+url,"#"+url);
	}

	//컨텐츠들어갈 부분
	jQuery('#content').html("여기는 컨텐츠영역임 " + url);

	}

	} );

	//뒤로 또는 앞으로 가기 이벤트 발생시
	$(window).on('hashchange', function () {

	console.log("시작 >>>>> hashchange");
	goToFromHash();
	console.log("hashchange <<<<< 끝");

	});

	//처음 로딩됬을때
	$(window).on('load', function () {
	goToFromHash('onload');
	});

	//해시 파싱했을때 처리 할것
	function goToFromHash (flag)
	{
	var hashtag = location.hash.substring(1, location.hash.length).replace(/ /gi, '%20');
	console.log("해시값","[",hashtag,"]");

	if (!hashtag && flag != 'onload') {
	location.reload();
	} else {
	loadPage(hashtag,"hash");
	}
	}
	</script>

	</head>
	<body>

	<button type="button" name="button1">첫번째페이지</button>
	<button type="button" name="button2">두번째페이지</button>
	<button type="button" name="button3">세번째페이지</button>

	<div id="content">
	메인페이지입니다
	</div>

	</body>
	</html>