2026, 새로운 도약을 시작합니다.
SIR
목록으로
이전글 다음글

클릭시 class 변경 질문 채택완료

장장똥
프로필 보기이 회원 글보기이 회원의 댓글보기
 3년 전 조회 2,193
답변 3
목록

아래처럼, 만들어놓았구. 메뉴 1클릭하면, 1메뉴 클래스만 on으로 변경하려고합니다.
아래처럼 했더니.. 전체 클래스가 on 으로 변경되는데 어떻게 처리해야할까요 ?ㅠㅠ

Copy 
    메뉴1

    메뉴2

    메뉴3

    메뉴4

 

 



  $(document).ready(function(){

    $(".off").attr("class","on");

  });

 
#그누보드5 #php #자바스크립트

답변 3개

채택된 답변
+20 포인트

링크가 필요해서 a를 넣으신건가요??

지금 a때문에 클릭하면 바로 넘어가 버려서 class 넣은게 사라집니다.

<script>
  $(document).ready(function(){
    $(".off").click(function(e) {
      e.preventDefault();
      $(this).addClass("on");
    });
  });
 </script>

이런식으로 click 해도 반응없게 하시면 되요

로그인 후 평가할 수 있습니다

답변에 대한 댓글 7개

페이지 이동된 상태에서, 해당 클릭 한 클래스가 변경되어 있어야합니다 ㅠㅠ
그럼 링크주소에 변수값으로 num=1 이런식으로 넘긴후에 넘어간 페이지에서 addclass 하거나 php로 <? if($num == "1") echo "on"; ?> 이런식으로 하셔야 할거 같은데요
변수 설정관련해서 검색을 해보았는데 ㅠㅠ 확실한 예제가 없습니다 ㅠㅠ;;
그냥 무식하게 메뉴별로 스킨 복제하여 구현했습니다.^^
정확히 원하시는게 뭔가요? 다른페이지에 같은 내용이 있다 치고 class를 추가하면 되는건가요?
1메뉴 클릭시
[code]
<li><a href="/" class="on" >메뉴1</a></li>
<li><a href="/" class="off" >메뉴2</a></li>
<li><a href="/" class="off" >메뉴3</a></li>
<li><a href="/" class="off" >메뉴4</li>
[/code]

2메뉴 클릭시
[code]
<li><a href="/" class="off" >메뉴1</a></li>
<li><a href="/" class="on" >메뉴2</a></li>
<li><a href="/" class="off" >메뉴3</a></li>
<li><a href="/" class="off" >메뉴4</li>
[/code]

3메뉴 클릭시
[code]
<li><a href="/" class="off" >메뉴1</a></li>
<li><a href="/" class="off" >메뉴2</a></li>
<li><a href="/" class="on" >메뉴3</a></li>
<li><a href="/" class="off" >메뉴4</li>
[/code]

이런식 입니다 ㅠㅠ..
답이안나와서 메뉴별로 스킨 복사해서. 클래스 하나씩 넣어줬네요..;;ㅠㅠ
https://mytest.iwinv.net/test1.php

이거 테스트 해보세요.. 링크 클릭시 같은페이지로 이동하고 on이 걸린건 글씨색이 빨간색으로 변합니다

댓글을 작성하려면 로그인이 필요합니다. 

ul 에 클래스명이 있으면 셀렉터에 넣어주세요 없으니까 그냥 아래 처럼 해드렸어요
Copy 

$(document).ready(function(){
    $("ul li .off").on('click',function(){
        $(this).addClass("on");
    });
  });
로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

Copy 



$(document).ready(function(){
    $(".off").on('click',function(){
        $(this).addClass("on");
    });
  });
로그인 후 평가할 수 있습니다

답변에 대한 댓글 4개

작성해주신대로 적용해봤지만. 작동을안합니다 ㅠㅠ
안한다는게 어떤점에서 안해요
클래스 변경이 안됩니다.
콘솔 로 찍어봐도 오류는 따로없습니다 ㅠㅠ
위에 다시 답변 달아놓았어요 참고해보세요

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고