Nani's space

/***********************  마우스 휠로 섹션 한 칸씩 이동 ****************************/
window.addEventListener("wheel", function(e){
    e.preventDefault();
},{passive : false});


const mHtml = $("html");
const cnt = 3;//섹션 개수
let page;
let pageOld;

let winHeight;
//mHtml.animate({scrollTop : 0},10); //새로고침시 최상단으로 이동
//페이지 이동시 스토리지 삭제는 별도 적용

// 새로고침시 스토리지에서 가져올 때
page = sessionStorage.getItem('page');
pageOld = sessionStorage.getItem('pageOld');



$('html,body').css('overflow','hidden');

$(window).on("wheel", function(e) {

    page ? '' : page=1; 
    pageOld ? '' : pageOld=1; 


	if(mHtml.is(":animated")) return;

	pageOld = page;
    if(e.originalEvent.deltaY > 0) {

        if(page == cnt+1) return;
        page++;

        if(pageOld==1 && page==2){
        winHeight = $(window).height()+150; // header 높이값 만큼 + 조절
        }else{
        winHeight = $(window).height()+50; // header 플로팅으로 인해 안맞는 부분만큼 조정
        }

    } else if(e.originalEvent.deltaY < 0) {

        if(page == 1) return;
        page--;

        if(pageOld==1 && page==2){
        winHeight = $(window).height()+150;
        }else{
        winHeight = $(window).height()+50;
        }
    }

    // 스토리지 저장할 때
    sessionStorage.setItem('page', page);
    sessionStorage.setItem('pageOld', pageOld);

    const posTop = (page-1) * winHeight;
    mHtml.animate({scrollTop : posTop},100);
})

/***********************  마우스 휠로 섹션 한 칸씩 이동 ****************************/

<header></header>
<div>section1</div>
<div>section2</div>
<div>section3</div>
<footer></footer>

.searchFormIon {
  position: absolute;
  width: 30px;
  height: 30px;
  top: 50%;
  left: 15px;
  transform:translateY(-50%);
  border-radius: 0 4px 4px 0;
  background: #fff;
}
.searchFormIon::before {
  position: absolute;
  content: '';
  width: 15px;
  height: 15px;
  top: calc(50% - 9px);
  left: calc(50% - 9px);
  border-radius: 50%;
  box-shadow: 0 0 0 2px #000;
}
.searchFormIon::after {
  position: absolute;
  content: '';
  width: 8px;
  height: 6px;
  top: calc(50% + 6px);
  left: calc(50% + 2px);
  border-top: solid 2px #000;
  transform: rotate(45deg);
}

<div style="position:relative;">
	<form name="formName">
        <input type="text" name="searchTxt"  value="<?=$_GET['searchTxt']?>" style="height:45px; font-size:16px; border:0px; text-align:center;" placeholder="검색할 내용을 입력하세요.">
        <p class="searchFormIon"></p>

        <!-- x -->
        <img src="images/top_02b.png" onclick="sss2()" style="width:10px; position:absolute; top:50%; right:30px; transform:translateY(-50%); cursor:pointer;">
	</form>					
</div>

function sss2(){
	const f = document.formName;
	f.searchTxt.value = "";
	f.searchTxt.focus();
}

<nav>
			<ul>
				<p class="nav_t">서브1</p>
				<div class="nav_b_all">
					<li class="nav_b" >메뉴1</li>
					<li class="nav_b" >메뉴2</li>
					<li class="nav_b" >메뉴3</li>
					<li class="nav_b" >메뉴4</li>
				</div>
			</ul>
            
            <ul>
				<p class="nav_t">서브2</p>
				<div class="nav_b_all">
					<li class="nav_b" >메뉴1</li>
					<li class="nav_b" >메뉴2</li>
					<li class="nav_b" >메뉴3</li>
					<li class="nav_b" >메뉴4</li>
				</div>
			</ul>
            <ul>
				<p class="nav_t">서브3</p>
				<div class="nav_b_all">
					<li class="nav_b" >메뉴1</li>
					<li class="nav_b" >메뉴2</li>
					<li class="nav_b" >메뉴3</li>
					<li class="nav_b" >메뉴4</li>
				</div>
			</ul>
            
            
</nav>

#head_section > nav > ul {width:calc(100%/5); text-align: center; height:100%; position:relative;}
#head_section > nav .nav_t{font-size:16px; color:#000; cursor:pointer; height:100%; line-height:100px;}

#head_section > nav .nav_b_all{height:0; overflow:hidden;  position:absolute; top:100px; left:0;}
#head_section > nav .nav_b_all .nav_b{font-size:16px; color:#000; padding:0 5px; transition:all 0.3s;}
#head_section > nav .nav_b_all .nav_b:first-child{padding-top:0;}
#head_section > nav .nav_b_all .nav_b:last-child{padding-bottom:0;}


/* .nav_t에  mouseover 시 .nav_b_all에 addClass on */
#head_section > nav .nav_b_all.on{height:auto; width:100%; border:1px solid #ccc; border-top:2px solid #25bdae; background:#fff;}
#head_section > nav .nav_b_all.on .nav_b{font-size:16px; color:#000; padding:12px 5px; cursor:pointer; transition:all 0.3s;}
#head_section > nav .nav_b_all.on .nav_b:first-child{padding-top:20px;}
#head_section > nav .nav_b_all.on .nav_b:last-child{padding-bottom:20px;}



#head_section > nav .nav_b_all.on .nav_b:hover{font-weight:bold;}

const nav_t = document.querySelectorAll('.nav_t');
	
nav_t.forEach( (nt) =>{
	
	const navSlideDown1 = nt.onmouseover = (e) =>{
		e.target.nextElementSibling.classList.add('on');
	}
	const navSlideDown2 = nt.parentElement.onmouseleave = (e) =>{
		e.target.children[1].classList.remove('on');
	};

})

  
//순서정렬
function order_go(or){

        let params = $("#form123").serialize();
        let f = document.form123;
        f.or.value=or;//순서명
        
        readList(params);

}
  
 //페이지 넘김 버튼을 눌렀을시 작동
function gopage(a){

        let f = document.form123;
        f.page.value=a;
        let params = $("#form123").serialize();
        const offset = $(".scmove").offset().top;
		
        readList(params);

}

function readList(params){
	$.ajax({
            url:'./list_ajax.php',
            method:'post',
            data:params,
            datatype:'html',
            success: function(data){
                $("#view").html(data);
                $('html,body').animate({
                    scrollTop:offset-100
                },500);
            }
        })
}

<form id="form123" class="scmove" name="form123">
    <input name="page" type="hidden" /> 
    <input name="or" type="hidden"/>
</form>
<div id="view"></div>

<button onclick="order_go('추천순')">추천순</button>
<button onclick="order_go('가격순')">가격순</button>

<button onclick="gopage(1)">1페이지</button>
<button onclick="gopage(2)">2페이지</button>
<button onclick="gopage(3)">3페이지</button>

#your_id{display:flex; flex-wrap: wrap; align-content: space-around; border-top:2px solid #332965; border-bottom:2px solid #332965; padding-top:25px; margin-bottom:20px; padding-bottom:15px;}
#your_id p{width:32%; padding:10px 10px; border-radius:8px; margin:0; margin-bottom:10px; font-size:14px; margin-right:calc(4%/3); cursor:pointer; color:#332965; font-weight:500;}
#your_id p:nth-of-type(3n){margin-right:0;}
.onb{background:#332965; color:#fff;}
.offb{background:#fff; color:#333; border:1px solid #332965;}​

<div id="your_id">
		<p class="offb">1</p>
        <p class="offb">2</p>
        <p class="offb">3</p>
        <p class="offb">4</p>
</div>

const bun = document.getElementById("your_id").children;
	
	 for(var i=0; i < bun.length; i++){
        bun[i].addEventListener('click', function(event){
			
			if(this.classList.contains('onb')===false){ addClass(this); }else{ removeClass(this); }

		});
    }
	
	function addClass(e){
		e.classList.replace('offb', 'onb');
	}
	function removeClass(e){
		e.classList.replace('onb', 'offb');
	}
    
    // 클래스 이름 변경
	function setClassName(id) {
		id.classList.toggle("rotate");
	}

스크립트가 html보다 아래에 위치해야한다.

<input type="hidden" name="insol_no">
<input type="text" name="gd_name" id="gd_name" style="border:0; padding:0;" readonly>


<label for="insol_no1>" id="insol1" style="width:80px; height:30px; line-height:30px; margin:0 auto; text-align:center; background-color:gray; color:#fff; cursor:pointer; border-radius:5px; display:block;" onclick="colorf('insol<?=$i?>')">선택</label>
<input type="checkbox" id="insol_no1" name="insol_no[]" value="123,홍길동1" style="display:none;" onchange="guide_list()">

<label for="insol_no2>" id="insol2" style="width:80px; height:30px; line-height:30px; margin:0 auto; text-align:center; background-color:gray; color:#fff; cursor:pointer; border-radius:5px; display:block;" onclick="colorf('insol<?=$i?>')">선택</label>
<input type="checkbox" id="insol_no1" name="insol_no[]" value="124,홍길동2" style="display:none;" onchange="guide_list()">

<label for="insol_no3>" id="insol3" style="width:80px; height:30px; line-height:30px; margin:0 auto; text-align:center; background-color:gray; color:#fff; cursor:pointer; border-radius:5px; display:block;" onclick="colorf('insol<?=$i?>')">선택</label>
<input type="checkbox" id="insol_no1" name="insol_no[]" value="125,홍길동3" style="display:none;" onchange="guide_list()">

function guide_list(){
	
		//가이드 이름, no 추가
		const f = document.form1111;
		const f2 = document.form2222;
		let arr0 = [];
		let arr1 = [];
		$('input[name="insol_no[]"]:checked').each(function(index) { 
			const value = $(this).val();
			const valit = value.split(',');
			arr0.push(valit[0]); 
			arr1.push(valit[1]); 
		});

		f2.insol_no.value = arr0;//no
		f.gd_name.value = arr1;//이름
		
	}

	function colorf(id){
		const pid = $('#'+id);
		const fcolor = pid.css('background-color');
		if(fcolor=='rgb(128, 128, 128)'){
			pid.css('background-color','#5fabbc');
		}else{
			pid.css('background-color','rgb(128, 128, 128)');
		}
	}

버튼 선택시 input:hidden 값에 key값추가 하고, 보이는 리스트에는 이름추가하기