채택완료
link클릭 시 border-bottom 색상 유지 질문
현재 메뉴 구성입니다.
질문 드리고 싶은 것은 shop 클릭 후 해당 페이지에서 border-bottom의 색상을 red로 바꾸고 폰트도 italic으로 바꾸고싶습니다.
css에서 active 사용 시에는 클릭하는 순간에만 변하고 그 후는 다시 border-bottom색상이 black으로 돌아오더라구요...
제발 도와주세요!!
자바스크립트를 사용해여할까요??
답변 1개 / 댓글 5개
채택된 답변
+20 포인트
스크립트 사용해서 클래스를 추가해주셔야합니다
css만으로는 상태제어하기 어렵습니다
정 css로만 해야한다면 checkbox로 변경해서 checked 상태로 구분하는방법도있습니다만,,
답변에 대한 댓글 5개
안녕하세요, 아직도 해결이 안되어서 재질문 드립니다.
말씀하신 자바스크립트 삽입하고 css도 넣었는데 작동이 되지 않습니다..... 왜이러는걸까요ㅠㅠㅠ
html)
[code]
<ul id="hd_qnb">
<li><a href="<?php echo G5_SHOP_URL ?>/list_itemall.php" class="hd_qnb_link">shop</a></li>
<li><a href="<?php echo get_pretty_url('content', 'company'); ?>" class="hd_qnb_link">about us</a></li>
<li><a href="<?php echo G5_SHOP_URL ?>/formmail.php" class="hd_qnb_link">contact</a></li>
</ul>
[/code]
script)
[code]
$(".hd_qnb_link").on("click",function(){
$(".hd_qnb_link").removeClass("active");
$(this).addClass("active");
}
);
[/code]
css)
[code]
.hd_qnb_link {border-bottom: 1px solid black;}
.active {border-bottom: 1px solid red; }
[/code]
뭐가 오류인지 알려주시면 정말 감사하겠습니다...
말씀하신 자바스크립트 삽입하고 css도 넣었는데 작동이 되지 않습니다..... 왜이러는걸까요ㅠㅠㅠ
html)
[code]
<ul id="hd_qnb">
<li><a href="<?php echo G5_SHOP_URL ?>/list_itemall.php" class="hd_qnb_link">shop</a></li>
<li><a href="<?php echo get_pretty_url('content', 'company'); ?>" class="hd_qnb_link">about us</a></li>
<li><a href="<?php echo G5_SHOP_URL ?>/formmail.php" class="hd_qnb_link">contact</a></li>
</ul>
[/code]
script)
[code]
$(".hd_qnb_link").on("click",function(){
$(".hd_qnb_link").removeClass("active");
$(this).addClass("active");
}
);
[/code]
css)
[code]
.hd_qnb_link {border-bottom: 1px solid black;}
.active {border-bottom: 1px solid red; }
[/code]
뭐가 오류인지 알려주시면 정말 감사하겠습니다...
답변을 작성하려면 로그인이 필요합니다.