클릭시 class 변경 질문
본문
아래처럼, 만들어놓았구. 메뉴 1클릭하면, 1메뉴 클래스만 on으로 변경하려고합니다.
아래처럼 했더니.. 전체 클래스가 on 으로 변경되는데 어떻게 처리해야할까요 ?ㅠㅠ
<li><a href="/" class="off" >메뉴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>
<script>
$(document).ready(function(){
$(".off").attr("class","on");
});
</script>
답변 3
링크가 필요해서 a를 넣으신건가요??
지금 a때문에 클릭하면 바로 넘어가 버려서 class 넣은게 사라집니다.
<script>
$(document).ready(function(){
$(".off").click(function(e) {
e.preventDefault();
$(this).addClass("on");
});
});
</script>
이런식으로 click 해도 반응없게 하시면 되요
페이지 이동된 상태에서, 해당 클릭 한 클래스가 변경되어 있어야합니다 ㅠㅠ
그럼 링크주소에 변수값으로 num=1 이런식으로 넘긴후에 넘어간 페이지에서 addclass 하거나 php로 <? if($num == "1") echo "on"; ?> 이런식으로 하셔야 할거 같은데요
변수 설정관련해서 검색을 해보았는데 ㅠㅠ 확실한 예제가 없습니다 ㅠㅠ;;
그냥 무식하게 메뉴별로 스킨 복제하여 구현했습니다.^^
정확히 원하시는게 뭔가요? 다른페이지에 같은 내용이 있다 치고 class를 추가하면 되는건가요?
1메뉴 클릭시
<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>
2메뉴 클릭시
<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>
3메뉴 클릭시
<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>
이런식 입니다 ㅠㅠ..
답이안나와서 메뉴별로 스킨 복사해서. 클래스 하나씩 넣어줬네요..;;ㅠㅠ
https://mytest.iwinv.net/test1.php
이거 테스트 해보세요.. 링크 클릭시 같은페이지로 이동하고 on이 걸린건 글씨색이 빨간색으로 변합니다
$(document).ready(function(){
$(".off").on('click',function(){
$(this).addClass("on");
});
});
작성해주신대로 적용해봤지만. 작동을안합니다 ㅠㅠ
안한다는게 어떤점에서 안해요
클래스 변경이 안됩니다.
콘솔 로 찍어봐도 오류는 따로없습니다 ㅠㅠ
위에 다시 답변 달아놓았어요 참고해보세요
ul 에 클래스명이 있으면 셀렉터에 넣어주세요 없으니까 그냥 아래 처럼 해드렸어요$(document).ready(function(){ $("ul li .off").on('click',function(){ $(this).addClass("on"); }); });
