고로고로
31
2021-06-09 16:38:43
2
393

JavaScript/Jquery addClass를 사용해서 추가한 클래스를 유지하고 싶습니다.


안녕하세요.

게시판 만들기 중 질문이 있어서 글을 남깁니다.


<section class="subMenu">
            <div>
                <ul>
                    <li class="on"><a href="/main/company.do"><span>COMPANY</span></a></li>
                    <li ><a href="/main/history.do"><span>HISTORY</span></a></li>
                    <li><a href="/main/certification.do"><span>CERTIFICATION</span></a></li>
                    <li><a href="/main/organization.do"><span>ORANAZATION</span></a></li>
                    <li><a href="/main/news.do"><span>NEWS</span></a></li>
                </ul>
            </div>
        </section>

        <script>
	        let	 itemli = $('div > ul > li');
			console.log(itemli);
	        
	        itemli.click(function (e) {
	        	console.log($(this));
	            $(this).addClass('on');
	            itemli.not($(this)).removeClass('on');
	        });
        </script>


하고 싶은 것

li태그를 클릭하면 클릭한 li태그에 'on'이라는 클래스명을 추가하고 클릭한 태그 이외에 'on'이라는 클래스를 삭제 하고 싶습니다.


현재 상황

상기 코드는 jsp파일이며 이 파일을 여러 jsp파일에 import해서 사용 하고 있습니다.

스크립트 구문은 itemli라는 변수에 <li>태그들을 대입했습니다.

그리고 클릭 이벤트를 주어서 <li>를 개별 확인 후, 확인 된 <li>태그에 addClass를 사용하여 클래스를 추가하고 확인된 태그 이외의 것들은 클래스를 삭제하도록 했습니다.


문제점

<a>태그에 컨트롤러로 보내는 매핑값이 있습니다.

그래서 클릭시 매핑값과 일치하는 컨트롤러를 타고 리턴하는데 위의 스크립트가 초기화 되는 거 같습니다. e.preventDefault()를 사용해서 확인 결과 클릭하면 제대로 클래스명이 추가/삭제 되는 것을 확인 했습니다.

이 상황에서 변경된 것들을 유지 하려면 어떻게 해야 할까요??

고민을 하고 있는데 딱히 떠오르는 생각이 없어서 글을 남깁니다.

답변 주시는 분들에게 미리 감사하다는 말씀을 드립니다.

0
  • 답변 2

  • 크라
    140
    2021-06-09 16:51:36 작성 2021-06-09 16:53:13 수정됨

    에이.. 속았네요.


    href면 url변경 되는건데...




    $(document).ready(function(){
    	$(".subMenu > div > ul > li").removeClass("on");
    	var url = "${url}";//url 변수로 받아옴. 아니면 
    	var url = $(location).attr('href');// 아니면 이렇게
    	$.each($(".subMenu > div > ul > li"), function() {
    		var th = this;
    		var a_href = $(th).find("a").attr("href");
    		if(url.indexOf(a_href) >= 0) {
    			$(th).addClass("on");
    			return false;
    		}
    	});
    });



    화면 띄우면 초기화 되니까 ready 하세요.

  • 고로고로
    31
    2021-06-09 17:02:52

    @크라

    감사합니다!!

    작성해주신 코드로 하니까 제가 원하는 기능이 실현 되었습니다ㅜ

    바쁘실텐데 도움을 주셔서 다시 한번 감사드립니다.



  • 로그인을 하시면 답변을 등록할 수 있습니다.